React Text Split
================

DO NOT USE. SEE

Provides a set of React components to split a text string up for easy CSS styling

Install

$3

Include /dist/ReactTextSplit.js or /dist/ReactTextSplit.min.js in your html

The global variable ReactTextSplit is available for use.

$3

yarn add @layerframers/react-text-split

``javascript
import TextSplit from 'react-text-split';
import WordTextSplit from 'react-text-split';
import LetterTextSplit from 'react-text-split';
import RotateTextSplit from 'react-text-split';
`

Usage

Each component has 2 props:

text - the text to split/render
classBase - the base for each of the written classes, default 'text-split'

Each component renders in the following format (LetterTextSplit):

`html

s
o
m
e
 
t
e
x
t

`

This allows per-part styling via css:

`css
// don't show anything for whitespace characters
.example-part.whitespace {
background: none !important;
}

// gold background block behind white text
.text-split-part {
padding: 10px;
font-size: 60px;
display: inline-block;
background: #ffb500;
color: #fff;
}

// every odd one skew 10 degrees
.example-part:nth-child(odd) {
moz-transform: skewY(-10deg);
-webkit-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
transform: skewY(-10deg);
}

// every even one skew opposite direction
// and set orange background with white text
.example-part:nth-child(even) {
background: #f15b14;
color: #fff;
moz-transform: skewY(10deg);
-webkit-transform: skewY(10deg);
-o-transform: skewY(10deg);
-ms-transform: skewY(10deg);
transform: skewY(10deg);
}
`

This will make a 'folded paper' type effect with the text, and will show gaps where the whitespace is.

$3

The outer element has an aria-label set to the given text and the class ${classBase}-base

Each split of the text is an element with aria-hidden set and the classes ${classBase}-part and part-${index}.
If the element contains only whitespace it also contains the classes ${classBase}-whitespace and whitespace.

All space characters are replaced with   to allow full styling of empty tags.

Types

$3

Splits around whitespace characters.

e.g. ' some words separated by differing whitespace' => ' ', 'some', ' ', 'words', ' ', 'separated', '  ', 'by', '  ', 'differing', ' ', 'whitespace'

$3

Splits each letter into it's own span

e.g. 'some text' => 's', 'o', 'm', 'e', ' ', 't', 'e', 'x', 't'

$3

Puts the entire string in a single element, used as a superclass for WordTextSplit and LetterTextSplit and custom
components

$3

This is a wrapper around any other kind of TextSplit element that rotates the text shown from an array on a timer (2000ms).

It takes the following props:

values - an array of text values, only 1 string will be shown at a time
type - a React component to pass the text and classBase to
classBase - passed to the TextSplit element

Example:

`javascript

`

Will render ['some', ' ', 'random'] then ['text', ' ', 'strings'] and finally ['to', ' ', 'rotate'] before starting again

Customization

You can create your own splits by extending the TextSplit component and overriding the splitText function:

`javascript
var Custom = ReactTextSplit.TextSplit;
Custom.prototype = ReactTextSplit.TextSplit.prototype;

Custom.prototype.splitText = function() {
return this.props.text.split(/(t)/);
};
`

This splits around and keeps the 't' character like this: 'React Text Split Example' => 'Reac', 't', ' ', 'T', 'ex', 't', ' Spli', 't', ' Example'

Example

An example can be found in the examples` folder showing each component + a sample overridden component