0.0.7 • Published 8 months ago

react-simple-rotating-text v0.0.7

Weekly downloads
-
License
-
Repository
-
Last release
8 months ago

react-simple-rotating-text

A simple rotating animation text component for react apps

NPM JavaScript Style Guide

Demo gif

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

properydescriptionrequireddefaultallowed values
textsAn array of stringstrue
colorsAn array of strings of colorsfalsehex code of color
backgroundColorsAn array of strings of background colorsfalsehex code of color
duratrionduration of the animationfalse2.5snumber
animationname of the animationfalsefadefade, slide, scale
directiondirection of animationfalseverticalhorzontal or vertical
classNameCustom classes for stylingfalse

License

MIT © dilpreetsio