https://github.com/littlee/react-shuffle-text
React component that apply shuffle animation to text
https://github.com/littlee/react-shuffle-text
animation react react-component
Last synced: about 2 months ago
JSON representation
React component that apply shuffle animation to text
- Host: GitHub
- URL: https://github.com/littlee/react-shuffle-text
- Owner: littlee
- Created: 2018-07-13T09:37:37.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-25T20:06:36.000Z (over 2 years ago)
- Last Synced: 2025-03-31T08:12:23.457Z (3 months ago)
- Topics: animation, react, react-component
- Language: JavaScript
- Size: 1.85 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Shuffle Text
## Basic Usage
install:
```
npm install -S react-shuffle-text
```
render:
```js
import ShuffleText from 'react-shuffle-text';
// somewhere in render function
```
custom styles & effects:
```css
/* 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