NextJs Simple Typewriter

 !npm bundle size!GitHub

a fork of react-simple-typewriter using 'use client' directive.

> A simple react component for adding a nice typewriter effect to your project.
> In nextJS 13.4, an error is caused because hooks are not allowed on server-side code. this package fixes that and runs the code client-side.
> Enjoy

Install

#### npm

``sh
npm i nextjs-simple-typewriter
`

#### Yarn

`sh
yarn add nextjs-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 (



)
}
`

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



)
}
`

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 (



);
};
`

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



);
};
`

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



);
};
`

$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 © SoloReverse

- Thank you to Awran5
- Thank you for MidoAhmed for the updated rollup starter code rollup-react-library-starter