react-simple-rotating-text

A simple rotating animation text component for react apps

Live demo

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

License

MIT © dilpreetsio