auto-typing-react

Auto typing animation's component

Install

npm install --save react-auto-typing
or
yarn add react-auto-typing

Demo

Usage

import React from 'react'

import AutoTyping, { BlinkCursor } from 'react-auto-typing'

export const myComponent = () => (
  <>
    <AutoTyping
      active // <boolean>
      textRef='Your string text' // <string>
      writeSpeed={150} // <number>
      deleteSpeed={150} // <number>
      delayToWrite={1000} // <number>
      delayToDelete={2000} // <number>
    />
    <BlinkCursor
      active // <boolean>
      blinkSpeed={500} // <number>
    />
  </>
)

Properties

If you don't put the properties, they will use default values.

AutoTyping

• active start/stop animation. [ Default value: true ] <boolean>
• textRef string to write. [ Default value: Input a string ] <string>
• writeSpeed writing speed. [ Default value: 50 ] <number>
• deleteSpeed delete speed. [ Default value: 50 ] <number>
• delayToWrite time until starts to write. [ Default value: 1000 ] <number>
• delayToDelete time until starts to delete. [ Default value: 1500 ] <number>

BlinkCursor

• active start/stop animation. [ Default value: true ] <boolean>
• blinkSpeed speed of blink. [ Default value: 500 ] <number>

License

MIT © iZanfir