react-html-rotator2

React-text-rotator

Simple React component for rotating text.

See the demo.

Getting Start

npm install react-text-rotator --save

Usage

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>
);

Props

Name	Type	Required	Default	Obs
content	Array	True		Array of content shape (see bellow)
time	Number	False	2500	Time in milliseconds
startDelay	Number	False	250	Wait before the first content (milliseconds)
transitionTime	Number	False	500	Time in 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)

Development

Installation

• 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.

Demo Development Server

• npm start will run a development server with the component's demo app at http://localhost:3000 with hot module reloading.

Running Tests

• npm test will run the tests once.

• npm run test:coverage will run the tests and produce a coverage report in coverage/.

• npm run test:watch will run the tests on every change.

Building

• npm run build will build the component for publishing to npm and also bundle the demo app.

• npm run clean will delete built resources.