malte-wessel / react-textfit Goto Github PK
View Code? Open in Web Editor NEWReact component to fit headlines and paragraphs into elements
Home Page: http://malte-wessel.github.io/react-textfit/
License: MIT License
React component to fit headlines and paragraphs into elements
Home Page: http://malte-wessel.github.io/react-textfit/
License: MIT License
Hey, would you say this would work well with animation? e.g. for placing text inside of a monotonically increasing circle? does it also have an option to center-align the text?
Thanks!
Passing min and max props don't set the minimum and maximum font size.
In my case my div is resizable, so I would like to have a method that I could call on div resize stop that would trigger a resize on the Textfit element
In react 17.0.1v doesnt work
This console error only comes up when I run unit tests.
I have tried adding a height to the component, wrapping in a span with a height, encasing a span with a height. No luck. Any suggestions for removing this warning?
Like limit the text to 2 lines.
Hi !
i have fixed height div now i want to print that div but the issue is i want to change the font-size unit into Points in order to maintain font-size in print
I use this with a Gatsby site. Often the font size will initially load at the minimum font size and it does not update.
Right now it only supports absolute pixels for max/min values. But this is problematic, as my webapp (and most modern webapps) set all sizes in REM units, which makes websites responsive to different display sizes. Having to set absolute pixels for this component only makes the text go out of proportions with the rest of the webapp.
Is it possible to allow setting min/max values in rem units?
Hey guys,
Is there any way the react-textfit component only resizes on the initial mount??
The component is causing a weird side effect where when I scroll really quickly on my phone the component resizes and causes the page to snap to a position on the page.
I think it's because when I scroll really quick the browser's url bar/bottom options bar disappears and that causes react-textfit component to resize, which then causes the page to snap.
This does not seem to happen anywhere outside a test environment.
Full stack trace:
TypeError: Cannot read property 'style' of null
at Window.getComputedStyle (node_modules/jsdom/lib/jsdom/browser/Window.js:371:20)
at innerWidth (node_modules/react-textfit/lib/utils/innerSize.js:16:24)
at TextFit.process (node_modules/react-textfit/lib/Textfit.js:136:59)
at TextFit.componentDidMount (node_modules/react-textfit/lib/Textfit.js:99:18)
at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4553:24)
at commitAllLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5729:9)
at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1610:14)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
@malte-wessel curious what your plans for this package are. I see in the last couple days there has been some activity resulting in pull requests. However, I also see that the project hasn't been updated in quite a while.
I'm also thinking about starting to use the project, but based on the current state think I'll probably be making my own fork so I can pull in fixes from others as well as make my own. Hopefully there is a way to get all these fixes from the community into a canonical repository.
I am facing a need to force a recalculation on Textfit
.
It could be nice if Textfit
exposes a ref with a method fitText
or something of the sort.
Current Workaround
window.dispatchEvent(new CustomEvent('resize'));
Would you be so kind to adjust it?
As the title says, the font size is way too big until I resize the window.
I'm new to react and just started using this component so maybe my observations are far from correct but there we go.
My issue is that sometimes the font-size calculated is by far too small. By adding some logs I've observed that the issue was that the originalWidth
calculated at first wasn't correct (it returned a less width of what it should) so the algorithm resulted in an incorrect font-size. I corrected the issue by making sure that every time the algorithm called assertElementFitsHeight
and assertElementFitsWidth
the innerWidth
and innerHeight
was retrieved again from the element. Does this make any sense?
Thanks!
when in single
mode, have an option to show an ellipsis when using a min
value in props and the text overflows.
here's the call stack,
KEGo.t.innerWidth (innerSize.js:16)
value (Textfit.js:136)
n.handleWindowResize (Textfit.js:77)
s (throttle.js:26)
setTimeout (async)
(anonymous) (throttle.js:36)
in below function, el is null. according to the code, this el is an intermediate div wrapper that's not from consumer code but inside the library, is this something can be looked at?
I have a very good chance to reproduce this issue when the page is refreshed (just loaded) then resize the window, after that it seems to be fine.
// Calculate width without padding.
function innerWidth(el) {
var style = window.getComputedStyle(el, null);
return el.clientWidth - parseInt(style.getPropertyValue('padding-left'), 10) - parseInt(style.getPropertyValue('padding-right'), 10);
}
When browser window is resized it seems that component still calls setState once it has been unmounted. This causes error prints to console:
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Textfit component.
Problematic code part is this.
], err => { // err will be true, if another process was triggered if (err) return; this.setState({ ready: true }, () => onReady(mid)); });
Issue gets fixed if shouldCancelProcess is checked before state is updated like this:
], err => { // err will be true, if another process was triggered if (err || shouldCancelProcess()) return; this.setState({ ready: true }, () => onReady(mid)); });
Maybe related to #38
I have a div with some dynamic text that the user enters. When the text is too long, react-textfit
does a good job of shrinking it to fit. But if the text becomes shorter, it does not increase the size again. Is this the expected behavior?
My workaround is set a key, like <Textfit key={text}>
. This means that React will use a new Textfit
component whenever the text changes, so it always recalculates the correct size.
But it might be good if react-textfit
had an option for this, even if it is not the default behavior.
I've tried to run the example demo simple
but it doesn't work. It seems some dependencies are missing.
This is the error I have:
ERROR in ./index.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /Users/able/projects/react-textfit/examples/simple
@ ./index.js 1:334-365
ERROR in ./components/App.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /Users/able/projects/react-textfit/examples/simple/components
@ ./components/App.js 1:334-365
process (Textfit.js:137)
TextFit._this.handleWindowResize (Textfit.js:77)
call (throttle.js:26)
throttled (throttle.js:36)
I have no idea why, but no matter what I do to the parent, or to the Textfit element itself with styles, the element's clientHeight appears to follow a pattern of X, 0, 0, X, 0, 0 etc when resizing a window. Perhaps something to do with the throttler?
Please enable support for React 17
When I use single mode, the text fits perfectly in a single line. However, when I change the mode to "multi", it no longer seems to resize the text.
Below is an example of my code:
return(
<div style={{fontSize: '15px'}}>
<div style={{margin: '10px', fontFamily: 'Times New Roman', border: 'solid black 2px', width: '200px', height: '80px'}}>
<Textfit mode="multi">
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</Textfit>
</div>
</div>
)
A screenshot of what I am seeing:
Is this a problem with the module, or am I doing something wrong?
This library just does not work with flex box containers:
export default function Comp() {
return (
<div style={{display: 'flex'}}><Textfit mode='single'>This will not resize.</Textfit></div>
)
}
It would be nice if it worked correctly with flex box, or if the repo at least warned that it does not work with flex box.
I can try to make it work with flex box and submit a pull request if someone can confirm it is a feature that the maintainers would like added.
This can easily be worked around by wrapping the <Textfit>
in a <div>
that is not display: 'flex'
. But, I did waste some time trying to figure out why my text wasn't resizing, and I would imagine future users will have the same problem.
TextFit is not rendering again when 'max' in props is set later
I supposed to use 'max' to unify same font sizes on several TextFit components.
I have two components loaded into the same Container (page).
The first component (top of the page) seems to work.
However, the second doesn't seem to detect componentDidUpdate
.
It looks like it is something to do with the ready
state not being set.
i.e. The second component process
didn't get the initial call, thus the ready state never set to true.
It works when I comment out
//var ready = this.state.ready;
//if (!ready) return;
from the componentDidUpdate
function.
I need this fix ASAP, please let me know if there's a quick solution or workaround to this.
Thank you in advance
I am trying to use this with Next.js without success. I've thought it might be related to server-side rendering. Could you confirm if if can work on Next?
Thanks!
vw
lets you specify font-size as a proportion of view width. I suspect that often the font-size will change roughly in proportion to the view width as you resize the browser. If this library used vw
instead of px
, it might smooth out the transitions by making it relatively rare that the font-size needed to change significantly. There would still need to be a way to select px
for when the library is used in fixed-width layouts.
Demo video:
https://www.loom.com/share/e1a54f0ee4ac4d6c93fedf24c100ec8d
When the text length changes from a length spanning multiple lines, to a smaller text requiring only one line, the font size doesn't update. It will keep its previous font size until the length of the incoming text spans more than one line and shifts the height of the div back to i's maxHeight.
the API is used like this
title={(<Textfit max={20}> {article.title} </Textfit>)}
Very lacks a minimized version, available on a direct link. Needed for use in sandboxes
Oh wait nvm it's actually not being torn down. My bad!
Hi, so when my page is first launched, the text fits and is resized properly. When it's made smaller, it resizes accordingly. However, when I increase the size of the window, the text does not scale back up.
Hi the TextFit is not at all resizing the font. I'm using react v ^0.14.7;
I'm using the Textfit to resize the react-datagrid column heading.
`
render() {
var categoryHeadings = GenerateCategoryHeadingsFromReportColumns(this.props.reportColumns);
return (
<div className='react-datagrid-column-category-headings'>
<div className="category-headings-flex-box">
{
_.map(categoryHeadings, function (columnHeading, key) {
if (columnHeading === undefined) {
return '';
}
var divStyle = {
width: columnHeading.width,
minWidth: columnHeading.width,
paddingRight: columnHeading.paddingRight
};
return (
<div className='category-heading' key={key} style={divStyle}>
<Textfit style={inlineStyle}
mode="single"
forceSingleModeWidth={false}>
{columnHeading.categoryName}
</Textfit>
</div>
);
})
}
</div>
</div>
);
}
`
The React update doesn't allow unofficial props anymore on DOM elements, and is spitting out:
Warning: Unknown props `forceSingleModeWidth`, `perfectFit`, `throttle`, `autoResize`, `onReady` on <div> tag.
Remove these props from the element.
For details, see https://fb.me/react-unknown-prop
in div (created by Textfit)
I'm getting incorrect sizes on initial page load in Safari. Easy way to reproduce just open the example website in Safari: link
The size gets correctly calculated as soon as you resize the browser a little bit
Hello, thanks for this package, very useful!
I'd love to use this on a current project, but we're using React 15.x and the latest published build specifies 14.x in peerDeps. Looks like there's been a recent commit to support 15 as well -- anything holding up publishing the change?
Thanks again!
Is there a way to configure or somehow manipulate the HTML wrapper elements that the plugin generates?
The generated markup is div > span
So if you use:
<Textfit mode="single">
<h2>Fat headline!</h2>
</Textfit>
...then the output is div > span > h2
this is invalid markup because block elements (like H2) cannot be nested inside of inline elements (like span)
And if you use:
<h2>
<Textfit mode="single">
Fat headline!
</Textfit>
</h2>
...then the output is h2 > div > span
this is invalid markup because block elements (like div) cannot be nested inside of heading elements (like H2)
Is is possible to either:
span > span
instead of div > span
in the generated markupthanks!
Thanks for this fantastic tool!
I'm using react-textfit to implement the following:
The problem is that I end up with a lot of spacing between each word because each one must be an individual <Textfit>
. This is resolved by matching the line-height to the font-size.
A nice feature would be something like what's shown below where lineHeight
is a percentage adjustment of font-size
.
1 = (calculated font size) * 1
0.5 = (calculated font size) * 0.5
1.5 = (calculated font size) * 1.5
<Textfit lineHeight='1'>your next</Textfit>
<Textfit lineHeight='1'>big</Textfit>
<Textfit lineHeight='1'>beverage</Textfit>
<Textfit lineHeight='1'>boost</Textfit>
<Textfit lineHeight='1'>is here</Textfit>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.