malte-wessel/react-textfit

How to manually trigger resize

stackoverfloweth opened this issue · 4 comments

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

You could window.dispatchEvent(new Event('resize')); as the library adds a listener for the 'resize' event.

If that doesn't do the trick we could try something else.

Granted it might be useful to add this to the API and I will perhaps create a PR for this, if anyone has any ideas on how best to implement it please let me know.

A potentially better solution to manually triggering a resize may be to watch the parent element for resize and then trigger a resize/process() on that. Think this would be semi straightforward to achieve by using a ResizeObserver. Not fully supported by all browsers just yet but seems to be making its way out there and could be used via polyfill if needed.

@denis-sokolov Would this be of interest? Instead of watching window resizing watch for parent element resizing (which should capture both window resizing and other resizing events). If so, would be happy to take a look into implementing/opening a PR.

Slight update on this. I made a rough pass implementation on my forked project. Can also be used via @wootencl/react-textfit on NPM if that's of interest. Using a ResizeObserver seems to work fairly well. Will more than likely maintain that fork for the time being but happy to clean it up a bit and merge into here if it's something that would be approved.

I also seem to have this issue with text dynamically retrieved by a database and rendered in React JS. If I use it place the text manually in my code it works, but when retrieved dynamically it does not. I am looking for a way to trigger resize as well or something similar.