saltycrane / use-fit-text Goto Github PK
View Code? Open in Web Editor NEWReact hook used to fit text in a div
Home Page: https://saltycrane.github.io/use-fit-text/
React hook used to fit text in a div
Home Page: https://saltycrane.github.io/use-fit-text/
Hi,
I am here following up on an issue where I am migrating a CRA codebase to VITE.
It seems that there is an issue with rollup and the Resize Observer polyfill used.
TypeError: ResizeObserver constructor: 'new' is required
This has been reported in other libraries that use the polyfill and the answer has normally been to remove the polyfill.
Currently ResizeObserver API reaches 94.18% of the browsers.
No code changes needed other than removing the polyfill import
Happy to create a PR if you would like to move this forward
Perhaps this is already a feature and I've just not had luck with it? I tried 100%
and 100vw
and the text fit functionality doesn't seem to work properly with either. I've gotten it working with px
, which it what gets me thinking maybe other units aren't supported?
Thanks for an awesome project. This seems like a really promising React text-fit library!
Not totally sure why but passing lineHeight
to style causes it to always be minFontSize
with the console error.
Any tips on how to get this working?
I'm not sure what the issue is, because we use useFitText
in one other place and it works, but in this other circumstance it simply defaults to the specified maxFontSize
, even if that means it wraps lines. It's the same whether we use a width specified in pixels or percentages, whether we set a height on the element, whether we set overflow: hidden
- whether we change the text or resize the window. Nothing happens under any circumstances. Any thoughts?
If the content of container is being changed dynamically then the hook does not recalculate the font size
Hi, probably this is stupid question (sorry, but I'm not really good at Typescript).
But during the build or typescript project I'm getting this error:
node_modules/use-fit-text/dist/index.d.ts:2:23 - error TS2688: Cannot find type definition file for 'next'.
the question is, do you really need this line /// <reference types="next" />
in file dist/index.d.ts
?
Hi, Thanks for the package.
Is there a way to tell useFitText
to fill the whole width initially?
I mean the fontSize should be determined based on parent width initially but it is always at 100%; (needed for large parent element width)
maybe a field in the options
object passed to useFitText
is needed; like:
{ ... initialFontSize: 200, // OR: initialFontSize: "full-width" }
And also while applying text-align: center;
, the retrieved fontSize
from useFitText
is different from "not applying this style".
If the content of container is being changed dynamically then the hook does not recalculate the font size.
Looking back through the closed issues, I found this one, what says this was resolved back in v2.3.0 with the example given here example 4.
However, I am not convinced the solution solves the problem. While altering the text, the example does change the size of the font, but it does so using the previously rendered text, not the current text. This isn't obvious if you enter/delete using the provided text input, because the text is being resized to a similar number of characters. For example if your text is 20 characters long, adding another character will be it 21, and the font size calculation will happen on the original 20 which is close enough for it not to be a problem. So as you type the calculation is always done on the previous text, and so the problem appears to be resolved.
The problem becomes evident when the dynamic text is a different character length than the original. You can see the problem if you copy/paste characters into the input. See below
Is it possible to hide the text before the resize finishes, in order to prevent the flickering effect? What would you recommend?
Steps to reproduce:
This would be useful if container changes its size when window has been resized
I read in the Readme that you are using binary search. It seems that performance can be improved by not using binary search.
The algorithm for finding the font size is as follows:
const {width} = myElement. getBoundingClientRect();
coefficient = element_width / fontSize
newFontSize = 400 / coefficient
@saltycrane thanks for your work with this hook. I've been testing it over Next.js (with SSG and SSR pages) but I can't get it to resize correctly when I render the page.
Everything works as soon as I resize the viewport, otherwise, I always get 100 for the font size. Do you think there is a way to trigger it manually? Do you have any idea why this might happen?
Hey, first of all i want to say thanks for that magical and dynamic tool you have built.
i am having a problem with padding, seems like useFitText ignores it with box-sizing: border-box,
I have attached codesandbox example:
https://codesandbox.io/s/use-fit-text-basic-example-forked-l7u42?file=/pages/index.js
Thanks!
I'm using puppeteer to print a page that need font to be resized. Not all of my font get's resized when printing the page... How can I be sure the page is done refiting my font ?
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.