React Simple Typewriter

> A simple react component for adding a nice typewriter effect to your project.

 !npm bundle size!GitHub

Install

#### npm

``sh
npm i react-simple-typewriter
`

#### Yarn

`sh
yarn add react-simple-typewriter
`

---

Usage

There are two ways to Typewriter:

1. Component

`jsx
import React from 'react'
import { Typewriter } from 'react-simple-typewriter'

const MyComponent = () => {
return (

Props /} />

)
}
`

$3

| Prop | Type | Options | Description | Default |
| ---------------- | :---------------: | -------- | ------------------------------------------------------------------------------------------ | :----------------: |
| words | array | Required | Array of strings holding the words | ['Hello', '...'] |
| typeSpeed | number | Optional | Character typing speed in Milliseconds | 80 |
| deleteSpeed | number | Optional | Character deleting speed in Milliseconds | 50 |
| delaySpeed | number | Optional | Delay time between the words in Milliseconds | 1500 |
| loop | number \| boolean | Optional | Control how many times to run. 0 \| false to run infinitely | 1 |
| cursor | boolean | Optional | Show / Hide a cursor | false |
| cursorStyle | ReactNode | Optional | Change the cursor style available if cursor is enabled | \| |
| cursorBlinking | boolean | Optional | Enable cursor blinking animation | \| |
| onLoopDone | function | Optional | Callback function that is triggered when loops are completed. available if loop is > 0 | - |
| onType | function | Optional | Callback function that is triggered while typing with typed words count passed | - |
| onDelay | function | Optional | Callback function that is triggered on typing delay | - |
| onDelete | function | Optional | Callback function that is triggered while deleting | - |

---

$3

`jsx
import React from 'react'
import { Typewriter } from 'react-simple-typewriter'

const MyComponent = () => {

const handleType = (count: number) => {
// access word count number
console.log(count)}
}

const handleDone = () => {
console.log(Done after 5 loops!)
}

return (

Life is simple{' '}

{/ Style will be inherited from the parent element /}
words={['Eat', 'Sleep', 'Code', 'Repeat!']}
loop={5}
cursor
cursorStyle='_'
typeSpeed={70}
deleteSpeed={50}
delaySpeed={1000}
onLoopDone={handleDone}
onType={handleType}
/>

)
}
`

2. Hook

BREAKING CHANGES v5.0.0 Hook now returns text along with some useful flags:

| Prop | Type | Description |
| ---------- | :-----: | ----------------------------------- |
| isType | boolean | Check if currently typing |
| isDelete | boolean | Check if currently deleting |
| isDelay | boolean | Check if currently on delay |
| isDone | boolean | Check if all running loops are done |

`jsx
import { useTypewriter } from 'react-simple-typewriter'

const MyComponent = () => {
/**
* @returns
* text: [string] typed text
* NEW helper: {} helper flags
*/
const [text, helper] = useTypewriter({
/ Config /
})

/ Hook helper /
const { isType, isDelete, isDelay, isDone } = helper

return (

{text}

)
}
`

$3

| Prop | Type | Options | Description | Default |
| ------------- | :---------------: | -------- | ------------------------------------------------------------------------------------------ | :----------------: |
| words | array | Required | Array of strings holding the words | ['Hello', '...'] |
| typeSpeed | number | Optional | Character typing speed in Milliseconds | 80 |
| deleteSpeed | number | Optional | Character deleting speed in Milliseconds | 50 |
| delaySpeed | number | Optional | Delay time between the words in Milliseconds | 1500 |
| loop | number \| boolean | Optional | Control how many times to run. 0 \| false to run infinitely | 1 |
| onLoopDone | function | Optional | Callback function that is triggered when loops are completed. available if loop is > 0 | - |
| onType | function | Optional | Callback function that is triggered while typing | - |
| onDelete | function | Optional | Callback function that is triggered while deleting | - |
| onDelay | function | Optional | Callback function that is triggered on typing delay | - |

$3

`jsx
import React from 'react'
import { useTypewriter } from 'react-simple-typewriter'

const MyComponent = () => {
const [text] = useTypewriter({
words: ['Hello', 'From', 'Typewriter', 'Hook!'],
loop: 0
})

return (

{text}

)
}
`

$3

If you like to have the Cursor effect, you can import it as a separate Component

`jsx
import React from 'react'
import { useTypewriter, Cursor } from 'react-simple-typewriter'

const MyComponent = () => {
const [text] = useTypewriter({
words: ['Hello', 'From', 'Typewriter', 'Hook!'],
loop: 3,
onLoopDone: () => console.log(loop completed after 3 runs.)
})

return (

{text}

)
}
`

$3

| Prop | Type | Options | Description | Default |
| ---------------- | :-------: | -------- | --------------------------------- | :-------: |
| cursorStyle | ReactNode | Optional | Change cursor style | \| |
| cursorColor | String | Optional | Change cursor color | inherit |
| cursorBlinking | Boolean | Optional | disable cursor blinking animation | true` |

---

$3


$3

MIT © awran5