/react-text-rotator

A simple text-rotator React component.

Primary LanguageJavaScript

React-text-rotator

Travis npm package Coveralls

Simple React component for rotating text.

See the demo | Try on Codepen

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

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.