React-simple-rotating-text NPM

react-simple-rotating-text

A simple rotating animation text component for react apps

Demo gif

Install

npm install --save react-simple-rotating-text

Usage

Basic

import React, { Component } from 'react'
import { RotatingText } from 'react-simple-rotating-text'
import 'react-simple-rotating-text/dist/index.css'

class Example extends Component {
  render() {
    return <RotatingText texts={['hello', 'world']} />
  }
}

Custom colors

import React, { Component } from 'react'
import { RotatingText } from 'react-simple-rotating-text'
import 'react-simple-rotating-text/dist/index.css'

class Example extends Component {
  render() {
    return <RotatingText texts={['hello', 'world']}
      colors={['red', 'blue']}
    />
  }
}

Custom background colors

import React, { Component } from 'react'
import { RotatingText } from 'react-simple-rotating-text'
import 'react-simple-rotating-text/dist/index.css'

class Example extends Component {
  render() {
    return <RotatingText texts={['hello', 'world']}
      backgroundColors={['red', 'blue']}
    />
  }
}

Animations

Fade

import React, { Component } from 'react'
import { RotatingText } from 'react-simple-rotating-text'
import 'react-simple-rotating-text/dist/index.css'

class Example extends Component {
  render() {
    return <RotatingText texts={['hello', 'world']}
      animation='fade'
    />
  }
}

Slide

import React, { Component } from 'react'
import { RotatingText } from 'react-simple-rotating-text'
import 'react-simple-rotating-text/dist/index.css'

class Example extends Component {
  render() {
    return <RotatingText texts={['hello', 'world']}
      animation='slide'
      direction='vertical'
    />
  }
}

Scale

import React, { Component } from 'react'
import { RotatingText } from 'react-simple-rotating-text'
import 'react-simple-rotating-text/dist/index.css'

class Example extends Component {
  render() {
    return <RotatingText texts={['hello', 'world']}
      animation='scale'
    />
  }
}

Properties

propery	description	required	default	allowed values
texts	An array of strings	true
colors	An array of strings of colors	false		hex code of color
backgroundColors	An array of strings of background colors	false		hex code of color
duratrion	duration of the animation	false	2.5s	number
animation	name of the animation	false	fade	fade, slide, scale
direction	direction of animation	false	vertical	horzontal or vertical
className	Custom classes for styling	false