Simple React component for rotating text.
npm install react-text-rotator --save
import React from 'react';
import ReactTextRotator from 'react-text-rotator';
const content = [
{
text: 'We shall fight on the beaches.',
className: 'classA',
animation: 'fade',
},
{
text: 'We shall fight on the landing grounds.',
className: 'classB',
animation: 'fade',
},
{
text: 'We shall fight in the fields and in the streets.',
className: 'classC',
animation: 'fade',
},
{
text: 'We shall fight in the hills.',
className: 'classD',
animation: 'fade',
},
{
text: 'We shall never surrender...',
className: 'classE',
animation: 'fade',
},
];
const MyComponent = () => (
<div>
<h1>Churchill Speech</h1>
<ReactTextRotator
content={content}
time={5000}
startDelay={2000}
/>
</div>
);
Name | Type | Required | Default | Obs |
---|---|---|---|---|
content | Array | True | Array of content shape (see bellow) | |
time | Number | False | 2500 | Time in milliseconds |
startDelay | Number | False | 0 | Wait before the first content (milliseconds) |
Content shape
Name | Type | Required | Default | Obs |
---|---|---|---|---|
text | String | True | Text to be shown | |
className | String | False | Class name for each span | |
animation | String | False | 'fade' | Pre-defined animation for the content (only fade is available) |
-
Clone
git clone https://github.com/claytonmarinho/react-text-rotator.git
. -
Running
npm install
in the components's root directory will install everything you need for development.
npm start
will run a development server with the component's demo app at http://localhost:3000 with hot module reloading.
-
npm test
will run the tests once. -
npm run test:coverage
will run the tests and produce a coverage report incoverage/
. -
npm run test:watch
will run the tests on every change.
-
npm run build
will build the component for publishing to npm and also bundle the demo app. -
npm run clean
will delete built resources.