Helps you create beautiful text animations by splitting and wrapping your text into lines, words and letters with a custom element.
Want to see the library in action? Check out these awesome Demos. If you're ready to get started, visit the Installation Guide and the API Documentation.
- Fully Responsive 📐: recalculates wrappers on component resize with
ResizeObserver
, rather than on window resize. - Lightweight 🪶: zero dependencies, and less than 7kb un-minified.
- Semantic 📝: wraps you text in
span
by default, so you can use it insideh1
and many other elements. You can also select the container's rendered container tag via props.
You can get started by running the following command
npm i split-text-react
That's it! You can now import the component and the types. Checkout the API Documentation to learn how to use them
import SplitText {
SplitTextProps,
LineWrapperProps,
WordWrapperProps,
LetterWrapperProps,
} from 'split-text-react';
export default function Component() {
return <SplitText>This is awesome!</SplitText>
}
In the following sections I'll explain some aspects of the library I think you might want to be aware of when using the library. You're completely free to give them a miss, but taking a look would at them would help you understand the library better
This is the web API
that allows SplitText
to only re-calculate the wrappers when it has actually been resized, rather than listening to the window
's resize event. You can check the MDN documentation for this API here.
Although it sits at 96.17%
support on caniuse.com at the moment of writing this README, if you ever encounter issues with compatibility you can install the resize-observer-polyfill
to patch this API.
If you've used GSAP's SplitText
before, you'd probably noticed we're using span
elements rather than div
. This is intentional, as span
elements can be children of basically any HTML element due to them being inline
by default. However, we're setting their display
property to inline-block
to avoid issues with the transform
property in some browsers.
- @CyriacBr: This package was inspired/forked from
react-split-text
(hence this package's super creative name). Thank you for building this awesome library! ❤️ - The GSAP team: More specifically the SplitText's features section. It helped me figure out the issues I was having with
span
elements. If you're building animations with this package, definitely checkoutgsap
. It's one of the best animation libraries out there.