Index

React Split Text

This component lets you split your text, and wrap each line, word or letter with a custom element. The lines and words are correctly split according to how they fit in the layout. The component doesn't change that behavior, it just analyzes the text and wrap each line, word and letter in a custom element. This lib is useful when trying to make text animations or special effects with texts.

Features

Zero-dependency 1.4 KB minified and gzipped
Wrap your letters, words or lines with custom elements
Respect and keep your layout integrity
Readjust on resize
Support dynamic text

Installation

npm i @cyriacbr/react-split-text
# or
yarn add @cyriacbr/react-split-text

Usage

To use this library, simply wrap your text with the SplitText component. The text will automatically be wrapped, by default with span elements, and will be readjusted on resize. You can inspect the bellow result to see how each line, word and letter are wrapped with a span.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

<SplitText>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat
</SplitText>

<SplitText>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat
</SplitText>

Props

className

string

style

CSSProperties

ref

A React ref

LineWrapper

ComponentType<LineWrapperProp>

WordWrapper

ComponentType<WordWrapperProp>

LetterWrapper

ComponentType<LetterWrapperProp>

extraProps

T = any

Wrapping Lines

To wrap lines, pass a component to the LineWrapper prop. SplitText will forward the following props to the wrapper:

lineIndex

number

required

extraProps

any

Example

Hover the lines to see their indexes.

<SplitText
  LineWrapper={({ lineIndex, children }) => (
    <span className="wrapper">
      {children}
      <b className="index">({lineIndex})</b>
    </span>
  )}
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat
</SplitText>

<SplitText
  LineWrapper={({ lineIndex, children }) => (
    <span className="wrapper">
      {children}
      <b className="index">({lineIndex})</b>
    </span>
  )}
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat
</SplitText>

Wrapping Words

Similarly, to wrap words, pass a component to the WordWrapper prop. SplitText will forward the following props to the wrapper:

lineIndex

number

required

wordIndex

number

required

countIndex

number

required

extraProps

any

Example

Hover the words to see their indexes.

<SplitText
  WordWrapper={({ wordIndex, countIndex, children }) => (
    <span className="wrapper">
      {children}
      <b className="index small">
        ({wordIndex})({countIndex})
      </b>
    </span>
  )}
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat
</SplitText>

<SplitText
  WordWrapper={({ wordIndex, countIndex, children }) => (
    <span className="wrapper">
      {children}
      <b className="index small">
        ({wordIndex})({countIndex})
      </b>
    </span>
  )}
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat
</SplitText>

Wrapping Letters

The same applies when it comes to wrapping letters. Use the LetterWrapper prop. SplitText will forward the following props to the wrapper:

lineIndex

number

required

wordIndex

number

required

letterIndex

number

required

countIndex

number

required

extraProps

any

Example

Hover the letters to see their indexes.

<SplitText
  LetterWrapper={({ letterIndex, children }) => (
    <span className="wrapper">
      {children}
      <b className="index small">({letterIndex})</b>
    </span>
  )}
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat
</SplitText>

<SplitText
  LetterWrapper={({ letterIndex, children }) => (
    <span className="wrapper">
      {children}
      <b className="index small">({letterIndex})</b>
    </span>
  )}
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat
</SplitText>

Misusage

The point of this component is primarily for animation purposes. This is not to be used to actually alter the content of your text. If your wrappers change the layout of your content, you may have undesired effects. This is an example of a result you probably do not want: adding extra content using the wrappers will result in incorrect splitting.

<SplitText
  LineWrapper={({ lineIndex, children }) => (
    <span className="wrapper">
      {children}
      <b>(line {lineIndex})</b>
    </span>
  )}
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat
</SplitText>

<SplitText
  LineWrapper={({ lineIndex, children }) => (
    <span className="wrapper">
      {children}
      <b>(line {lineIndex})</b>
    </span>
  )}
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat
</SplitText>

This also applies to wrappers injecting CSS that change the layout (e.g increases font size).

Real-World Usage

Bellow are some text animations and effects realized with this library and framer-motion. You can click on each frame to re-render the animation.

Hello world from the Reveal Component!

Reveal

Hello world from the FadeIn Component!

Fade In

Hello world from the Raise Component!

Raise

Hello world from the LetterDash Component!

Letter Dash

Hello world from the Filling Component!

Filling

Click here to see something cool 

Shapeshift

<Examples />

<Examples />

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Features

Features