Not resizing on dynamically received data

[seleckis]

If the content of container is being changed dynamically then the hook does not recalculate the font size

[saltycrane]

@seleckis I published use-fit-text@2.1.0 which uses ResizeObserver. See if that works for you.

[kriziacamilleuayan]

please update readme so that we'll know how to use that :)

[Nantris]

@saltycrane, this only seems to work if the element is not of a fixed size, am I wrong?

The issue we're seeing is that when text is added or removed programmatically, the text doesn't resize. Is there a way to work around this at present?

Thank you for sharing your great work!

[saltycrane]

Ah sorry guys, I didn't read the original issue carefully. The change I made in v2 was to support recalculating upon a resize of the container, but it doesn't recalculate if the content text changes. Currently the way I handle this is by using the React key attribute to cause a remount of the component to cause useFitText to recalculate. Here is more info about that: https://www.saltycrane.com/blog/2019/12/how-remount-react-component-when-prop-changes/

[Nantris]

Beautiful! Thank you @saltycrane!

[saltycrane]

Update: I just published use-fit-text@2.3.0 which now recalculates the font size when the content text changes. See the example here.

[Nantris]

@saltycrane is there any benefit to using the new version compared with the key-based workaround? Does it just implement the same behind the scenes?

[saltycrane]

hi @slapbox, I'd say the main benefit is that it should work automatically without needing to add the React key. There actually is a difference in the implementation-- I'm using innerHTML from the div's ref to check if the contents changed. You can see the code here: https://github.com/saltycrane/use-fit-text/blob/v2.3.0/index.ts#L83-L97