react-html-rotator v0.0.7

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

Content shape

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.