React Cypher Text Loop Component

A React component that accepts a list of strings and loops through them with a text cypher transition effect.

Live Demo

Install

npm i react-cypher-text-loop

Usage

import React, { Component } from 'react'

import CypherText from 'react-cypher-text-loop'

class Example extends Component {
  render() {
    return <CypherText textList={['React', 'Cypher', 'Text', 'Loop']} />
  }
}

Properties

| Property | Type | Required | Default value | Description | | :------------- | :----- | :------- | :---------------------------------- | :------------------------------------------------------------- | | textList | array | yes | | Array of text to loop through. | | delay | number | no | 800 | Delay between switching to the next item. | | placeholders | string | no | "____-_\/[]{}—=+*^?#!<>" | Characters used for cypher effect when switching between text. |

License

MIT © Carter McAlister