cyriacbr / react-split-text Goto Github PK

Hello @CyriacBr , for a certain animation I would need to know the total number of lines, but apparently, the LineWrapper component only provides the lineIndex as a prop.

Is there some way to get it, or should I start working on a PR ?

Just looking on the NPM page for this package and it seems to be missing the pointer to this git repo and the readme doesn't match what's here. Just mentioning in case you didn't notice.

When using this in react 18, It will start complaining about children not being part of it's props because children aren't implicitly included in the component props by itself anymore.

On iOS Safari with URL bar at the bottom of the screen (>15.0), the window resizes every time the scroll direction changes, as the URL bar is being minimized or expanded.
This triggers a re render of the SplitText component and the animation is triggered every single time.
Is there a way to prevent those undesired rerenders by filtering vertical resize listening events on iOS devices maybe?

hi I can't seem to animate text with justify text alignment, it only works for center, left and right.

I tried to make a fork that fixes #23, and it works just fine but the tests are failing because enzyme does not work with react 18 anymore.
Consider migrating to react-testing-library.

Hi, I found this, words are not transferred if there is a sign -

Example

Hey @CyriacBr, I discovered your library recently and it's very good as Splitting is not very optimized for React and SSR use. The thing is tho, I would like to have some italics or text formatting in my string, and as I understand it, that makes it tricky. I tried to play with some kind of Markdown way to make a text italic, but as the Component splits every character, that simply doesn't work…

The desired effect would be something like that:

Any lead?

Page.jsx

<SplitText text={RichText.asText(data.intro_headline)} className="title" mode="lines" />

SplitText.jsx

...

    /*
    ** Lines only
    */
    else if (mode === 'lines') {
        const Lines = ({ text, className }) => {
            return (
                <SplitText className={className}
                    LineWrapper={({ lineIndex, children }) => (
                        <div className="ln" style={{ '--ln-i': lineIndex }}>
                            <div className="ln__inner">
                                {children} // my text in italics would go there, but that contains HTML, so…
                            </div>
                        </div>
                    )}
                    WordWrapper={({ children }) => children}
                    LetterWrapper={({ children }) => {}}
                >
                    {text}
                </SplitText>
            )
        }

        return <Lines text={text} />
    }