react-shuffle-text

React Shuffle Text

Basic Usage

install:

npm install -S react-shuffle-text

render:

import ShuffleText from 'react-shuffle-text';


// somewhere in render function
<ShuffleText content="Zhuangbility" />

custom styles & effects:

/* write styles for .shuffle-text-char with higher specificity */
.my-shuffle .shuffle-text-char {
  animation: 0.5s ease-in-out both myWordEnter; /* none for no effect */
}

@keyframes myWordEnter {
  0% {
    opacity: 0;
    transform: translate(-100%, 0) scale(5);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

Available Props

• content: PropTypes.string.isRequired

  • text wanted to display

• charIncInterval: PropTypes.number (default: 100)

  • character increasing time interval

• charFrames: PropTypes.number (default: 10)

  • frame counts that each character plays

• charFrameTime: PropTypes.number (default: 50)

  • duration of each character frame

• more props are coming