textillate-react
v5.0.5
Published
React version
Downloads
950
Maintainers
Readme
Work with Textillate in React more easily!
View the origin version here
Usage
import { Textillate } from 'textillate-react'
Add animation
<Textillate>Happy Codding!</Textillate>
Animation option & font style
<h1>
<Textillate
option={{
in: {effect:'fadeInRight', shuffle:true},
out: {effect: 'bounceOutUp', shuffle: true},
loop: true,
}}
>
Happy Codding!
</Textillate>
</h1>
View full option here
Handle Event
const [textillateController, setTextillateController] = useState({});
<h1>
<Textillate
option={{
in: {effect:'fadeInRight', shuffle:true},
out: {effect: 'bounceOutUp', shuffle: true},
loop: true,
}}
controller={setTextillateController}
>
Happy Codding!
</Textillate>
</h1>
useEffect(() => {
textillateController.on('start.tlt', e => {
// do some stuff...
})
}, [textillateController])
View more event here
Methods
textillateController.start() // Manually start/restart textillate
textillateController.stop() // Manually pause/stop textillate
textillateController.in() // Trigger the current text's in animation
textillateController.out() // Trigger the current text's out animation
textillateController.on('event', callback())