Split Text React

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.

Standout Features

• 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 inside h1 and many other elements. You can also select the container's rendered container tag via props.

Installation

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

Deep Dive

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

The ResizeObserver

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.

The default wrappers

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.

Acknowledgments

• @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 checkout gsap. It's one of the best animation libraries out there.