@moxy/react-split-text
v1.0.1
Published
A react component that wraps each word of a sentence into a <span> element.
Downloads
54
Readme
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.