Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to manually trigger resize #38

Open
stackoverfloweth opened this issue Jul 6, 2018 · 4 comments
Open

How to manually trigger resize #38

stackoverfloweth opened this issue Jul 6, 2018 · 4 comments

Comments

@stackoverfloweth
Copy link

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

@hassanshaikley
Copy link

hassanshaikley commented Jul 23, 2018

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.

@wootencl
Copy link

wootencl commented Sep 7, 2018

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.

@wootencl
Copy link

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.

ehmorris pushed a commit to ehmorris/ltc-video-notes that referenced this issue Sep 20, 2018
Use patched fit text package, see issue #38:
  malte-wessel/react-textfit#38
@kojow7
Copy link

kojow7 commented May 27, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants