Feature request: make SplitText recalculate wrappers when its dimensions change #27
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Before diving into the PR changes, I would like to thank you for this awesome library. I've been using it a lot lately and I love it ❤️.
Main request
Currently the
SplitTextonly recalculate all the wrappers when the window is resized [1]. Although this could be enough for most use cases, if the actual component is resized the text will overflow the container.Fixing this is really simple. You just need to replace the
window.addEventListener('resize', onResize)with aResizeObserveras done in this PR.I also prepared this codepen so you can see the package's current behavior vs the PR code.
Other enhancements
While working on the
ResizeObserverI noticed some aspects of the code that could be improved:The
SplitTextcomponentkeystate to "force" a re-render on theSplitTextInner, but this is unnecessarySplitTextandSplitTextInnerrespectively)The
SplitTextInnercomponentrefreshLines, themaxCharPerLinewas never updated, which could cause issues when the component gets bigger on a resize, as the old value will prevent the lines from expanding even though the container would expand.refreshLinesfunction received 2 parameters which were state values, so you could just read them from the component.Although these are not critical, I truly believe they could help improve the quality of the library.
Notes
I noticed you had some git hooks that ran the project's tests on push. I ran into an issue where
ResizeObserverwas not defined on the test environment. Since I'm not very familiar with the test runner you're using, I ran mygit pushwith the--no-verify-flag. I wanted to get this PR out and hopefully get some pointers about how to get around/fix this issue with the tests