Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/awran5/react-simple-typewriter
A simple react component for adding a nice typewriter effect to your project.
https://github.com/awran5/react-simple-typewriter
hook react react-component react-hooks typewriter typewriter-effect
Last synced: 17 days ago
JSON representation
A simple react component for adding a nice typewriter effect to your project.
- Host: GitHub
- URL: https://github.com/awran5/react-simple-typewriter
- Owner: awran5
- License: mit
- Created: 2020-10-22T14:46:41.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-25T09:52:03.000Z (7 months ago)
- Last Synced: 2024-10-11T17:34:25.773Z (28 days ago)
- Topics: hook, react, react-component, react-hooks, typewriter, typewriter-effect
- Language: TypeScript
- Homepage: https://react-simple-typewriter.vercel.app/
- Size: 1.65 MB
- Stars: 129
- Watchers: 2
- Forks: 25
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Simple Typewriter
> A simple react component for adding a nice typewriter effect to your project.
[](https://www.npmjs.com/package/react-simple-typewriter) [](https://standardjs.com)
## 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 (
)
}
```
### Component Props
| 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 | `true` |
| `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 | `-` |
---
### Usage Example
```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 */}
)
}
```
## 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}
)
}
```
### Hook Config
| 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 | `-` |
### Hook Usage Example
```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}
)
}
```
### Hook with Cursor
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}
)
}
```
### Cursor Component Props
| 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` |
---
### [Demo](https://react-simple-typewriter.vercel.app/)
[](https://codesandbox.io/s/react-simple-typewriter-uj8ix)
### License
MIT © [awran5](https://github.com/awran5/)