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} />
}
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.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} /> }