Gathering detailed insights and metrics for @michaelwwn/react-simple-typewriter
Gathering detailed insights and metrics for @michaelwwn/react-simple-typewriter
A simple react component for adding a nice typewriter effect to your project.
Installations
npm install @michaelwwn/react-simple-typewriterDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Min. Node Version
>=14
Node Version
17.4.0
NPM Version
8.3.1
Releases
7
Languages
3
TypeScript
JavaScript
CSS
TypeScript (79.16%)
JavaScript (17.17%)
CSS (3.67%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
135 Stars
129 Commits
26 Forks
1 Watchers
1 Branches
5 Contributors
Updated on Jun 08, 2025
Maintainers
1
Package Meta Information
Latest Version
5.0.1
Package Id
@michaelwwn/react-simple-typewriter@5.0.1
Unpacked Size
29.41 kB
Size
9.17 kB
File Count
10
NPM Version
8.3.1
Node Version
17.4.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
28
@babel/core@rollup/plugin-commonjs@rollup/plugin-node-resolve@storybook/addon-actions@storybook/addon-docs@storybook/addon-essentials@storybook/addon-interactions@storybook/addon-links@storybook/builder-webpack5@storybook/manager-webpack5@storybook/react@storybook/testing-library@storybook/theming@types/react@types/react-domauto-changelogautoprefixerbabel-loaderpostcssreactreact-domreact-scriptsrolluprollup-plugin-peer-deps-externalrollup-plugin-postcssrollup-plugin-terserrollup-plugin-typescript2typescript
React Simple Typewriter
A simple react component for adding a nice typewriter effect to your project.
Install
npm
1npm i react-simple-typewriter
Yarn
1yarn add react-simple-typewriter
Usage
There are two ways to Typewriter:
1. Component
1import React from 'react' 2import { Typewriter } from 'react-simple-typewriter' 3 4const MyComponent = () => { 5 return ( 6 <div className='App'> 7 <Typewriter {/* Props */} /> 8 </div> 9 ) 10}
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 | | |
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
1import React from 'react' 2import { Typewriter } from 'react-simple-typewriter' 3 4const MyComponent = () => { 5 6 const handleType = (count: number) => { 7 // access word count number 8 console.log(count)} 9 } 10 11 const handleDone = () => { 12 console.log(`Done after 5 loops!`) 13 } 14 15 return ( 16 <div className='App'> 17 <h1 style={{ paddingTop: '5rem', margin: 'auto 0', fontWeight: 'normal' }}> 18 Life is simple{' '} 19 <span style={{ color: 'red', fontWeight: 'bold' }}> 20 {/* Style will be inherited from the parent element */} 21 <Typewriter 22 words={['Eat', 'Sleep', 'Code', 'Repeat!']} 23 loop={5} 24 cursor 25 cursorStyle='_' 26 typeSpeed={70} 27 deleteSpeed={50} 28 delaySpeed={1000} 29 onLoopDone={handleDone} 30 onType={handleType} 31 /> 32 </span> 33 </h1> 34 </div> 35 ) 36}
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 |
1import { useTypewriter } from 'react-simple-typewriter' 2 3const MyComponent = () => { 4 /** 5 * @returns 6 * text: [string] typed text 7 * NEW helper: {} helper flags 8 */ 9 const [text, helper] = useTypewriter({ 10 /* Config */ 11 }) 12 13 /* Hook helper */ 14 const { isType, isDelete, isDelay, isDone } = helper 15 16 return ( 17 <div className='App'> 18 <span>{text}</span> 19 </div> 20 ) 21}
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
1import React from 'react' 2import { useTypewriter } from 'react-simple-typewriter' 3 4const MyComponent = () => { 5 const [text] = useTypewriter({ 6 words: ['Hello', 'From', 'Typewriter', 'Hook!'], 7 loop: 0 8 }) 9 10 return ( 11 <div className='App'> 12 <span>{text}</span> 13 </div> 14 ) 15}
Hook with Cursor
If you like to have the Cursor effect, you can import it as a separate Component
1import React from 'react' 2import { useTypewriter, Cursor } from 'react-simple-typewriter' 3 4const MyComponent = () => { 5 const [text] = useTypewriter({ 6 words: ['Hello', 'From', 'Typewriter', 'Hook!'], 7 loop: 3, 8 onLoopDone: () => console.log(`loop completed after 3 runs.`) 9 }) 10 11 return ( 12 <div className='App'> 13 <span>{text}</span> 14 <Cursor cursorColor='red' /> 15 </div> 16 ) 17}
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
License
MIT © awran5
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 1/29 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 2 are checked with a SAST tool
Reason
51 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
- Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
1.7
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More