isabella232 / react-split-text

A react component that wraps each word of a sentence into a <span> element.

react-split-text

A react component that wraps each word of a sentence into a <span> element.

Installation

$ npm install @moxy/react-split-text

This library is written in modern JavaScript and is published in both CommonJS and ES module transpiled variants. If you target older browsers please make sure to transpile accordingly.

Motivation

Sometimes there's a need to split a sentence into multiple elements, either to individually animate or simply style them. The SplitText component receives a string and splits it (with a separator of your choice) into multiple <span>s.

Usage

import React from 'react';
import SplitText from '@moxy/react-split-text';

const MyPage = (props) => (
    <div className="container">
        <SplitText className="word">Lorem ipsum dolor sit amet.</SplitText>
    </div>
);

export default MyPage;

Import the stylesheet in the project's entry JavaScript file:

import '@moxy/react-split-text/dist/index.css';

API

Besides the following supported props by the SplitText component, additional props are spread to each child.

children

Type: string | Required: true

Text to be split and rendered inside the component.

className

Type: string | Required: false

A className to apply to each child.

separator

Type: string | Required: false | Default: non-breaking space

The pattern describing where each split should occur, just like the one from String.prototype.split().

Tests

$ npm test
$ npm test -- --watch # during development

Demo

A demo Next.js project is available in the /demo folder so you can try out this component.

First, build the react-split-text project with:

$ npm run build

To run the demo, do the following inside the demo's folder:

$ npm i
$ npm run dev

Note: Everytime a change is made to the package a rebuild is required to reflect those changes on the demo.

FAQ

I can't override the component's CSS, what's happening?

There is an ongoing next.js issue about the loading order of modules and global CSS in development mode. This has been fixed in v9.3.6-canary.0, so you can either update next.js to a version higher than v9.3.5, or simply increase the CSS specificity when overriding component's classes, as we did in the demo, e.g. having the page or section CSS wrap the component's one.

License

Released under the MIT License.