Bouncing Text
A styled react component. Liven your text up.
Bounce the text by clicking/hovering on it.
The animation will not be triggered until last animation has finished!
Usage
Install:
npm install --save react-bouncing-text
// or
yarn add react-bouncing-text
Example:
import BouncingText from 'react-bouncing-text';
const MyBouncingText = () => {
<BouncingText
className={myClassName}
text={myTextToShow}
clickable
hoverable
delay={ms}
duration={ms}
>
};
export default MyBouncingText;API
BouncingText
| Porperty | Description | Type | Default |
|---|---|---|---|
| className | specify class name of whole text | String | -- |
| text | text to display | String | -- |
| clickable | whether triggerable by clicking | Boolean | false |
| hoverable | whether triggerable by hovering | Boolean | false |
| delay | delay for each text. every character's delay will time the index of itself. (ms) | Number | -- |
| duration | duration for each text. duration start after delay for each character. (ms) | Number | -- |
You should not keep text, delay, duration empty.