React-text-rotator NPM

React-text-rotator

Simple React component for rotating text.

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: "zoom",
    link: "https://example.com/",
  },
  {
    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: "squeeze",
  },
  {
    text: "We shall never surrender...",
    className: "classE",
    animation: "zoom",
    link: "https://google.com/",
  },
];

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 below)
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'	'fade', 'zoom' or 'squeeze'
link	String	False		Optional hyperlink for text

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.