textillate-react v5.0.5

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())