A simple react component for adding a nice typewriter effect to your project. now using 'use client' directives.
npm install 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

#### npm
``sh`
npm i nextjs-simple-typewriter
#### Yarn
`sh`
yarn add nextjs-simple-typewriter
---
There are two ways to Typewriter:
`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 (
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` |---

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