Skip to content

Commit 65b57c1

Browse files
awran5awran5
committed
perf: updates and performance improved
1 parent e489718 commit 65b57c1

File tree

10 files changed

+1420
-1165
lines changed

10 files changed

+1420
-1165
lines changed

‎.eslintrc.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,21 @@ module.exports = {
1919
},
2020
plugins: ['react', '@typescript-eslint'],
2121
rules: {
22-
'react/jsx-filename-extension': [1, { extensions: ['.ts', '.tsx'] }],
22+
'react/jsx-filename-extension': [
23+
1,
24+
{ extensions: ['.js', '.jsx', '.ts', '.tsx'] }
25+
],
2326
'import/extensions': [
2427
'error',
2528
'always',
2629
{
30+
js: 'never',
31+
jsx: 'never',
2732
ts: 'never',
2833
tsx: 'never'
2934
}
3035
],
36+
'@typescript-eslint/no-unused-vars': 'error',
3137
'no-console': 0,
3238
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
3339
'no-use-before-define': 'off',

‎README.md‎

Lines changed: 72 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -25,28 +25,67 @@ yarn add react-simple-typewriter
2525
## Breaking Changes in v2
2626

2727
- Named Imports.
28-
- Injected css style.
28+
- Injected **css** style.
29+
30+
---
31+
32+
## Usage
33+
34+
```jsx
35+
import { Typewriter, useTypewriter, Cursor } from 'react-simple-typewriter'
36+
```
37+
38+
## 1. Component
2939

3040
```jsx
31-
// import Typewriter from 'react-simple-typewriter'
32-
import { Typewriter } from 'react-simple-typewriter' // use named import
33-
// import 'react-simple-typewriter/dist/index.css' // no need to import
41+
import React from 'react'
42+
import { Typewriter } from 'react-simple-typewriter'
43+
44+
const MyComponent = () => {
45+
return (
46+
<div className='App'>
47+
<Typewriter {/* Props */} />
48+
</div>
49+
)
50+
}
3451
```
3552

36-
## <br/>
53+
### Component Props
54+
55+
| Prop | Type | Options | Description | Default |
56+
| ------------- | :---------------: | -------- | -------------------------------------------------------------------------------------------- | :----------------: |
57+
| `words` | Array | Required | Array of strings holding the words | `['Hello', '...']` |
58+
| `typeSpeed` | Number | Optional | Character typing speed in Milliseconds | `90` |
59+
| `deleteSpeed` | Number | Optional | Character deleting speed in Milliseconds | `50` |
60+
| `delaySpeed` | Number | Optional | Delay time between the words in Milliseconds | `1500` |
61+
| `loop` | Number \| Boolean | Optional | Control how many times to run. `0 \| false` to run infinitely | `1` |
62+
| `onLoopDone` | Function | Optional | Callback `Function` that is triggered when loops are completed. available if `loop` is `> 0` | `-` |
63+
| `onType` | Function | Optional | Callback `Function` that is runs while typing | `-` |
64+
| `cursor` | Boolean | Optional | Show / Hide a cursor | `true` |
65+
| `cursorStyle` | String | Optional | Change the cursor style available if `cursor` is `enabled` | `\|` |
66+
67+
---
3768

38-
## Usage Example (Component)
69+
### Component Usage Example
3970

4071
```jsx
4172
import React from 'react'
4273
import { Typewriter } from 'react-simple-typewriter'
4374

4475
const MyComponent = () => {
76+
77+
const handleType = (count: number) => {
78+
// access word count number
79+
console.log(count)}
80+
}
81+
82+
const handleDone = () => {
83+
console.log(`Done after 5 loops!`)
84+
}
85+
4586
return (
4687
<div className='App'>
47-
<h1
48-
style={{ paddingTop: '5rem', margin: 'auto 0', fontWeight: 'normal' }}
49-
>
88+
<h1 style={{ paddingTop: '5rem', margin: 'auto 0', fontWeight: 'normal' }}>
5089
Life is simple{' '}
5190
<span style={{ color: 'red', fontWeight: 'bold' }}>
5291
{/* Style will be inherited from the parent element */}
@@ -58,7 +97,8 @@ const MyComponent = () => {
5897
typeSpeed={70}
5998
deleteSpeed={50}
6099
delaySpeed={1000}
61-
onLoopDone={() => console.log(`Done after 5 loops!`)}
100+
onLoopDone={handleDone}
101+
onType={handleType}
62102
/>
63103
</span>
64104
</h1>
@@ -67,49 +107,41 @@ const MyComponent = () => {
67107
}
68108
```
69109

70-
### Component Props
71-
72-
| Prop | Type | Options | Description | Default |
73-
| ------------- | :---------------: | -------- | -------------------------------------------------------------------------------------------- | :------------------: |
74-
| `words` | Array | Required | Array of strings holding the words | `['Hello', 'World']` |
75-
| `cursor` | Boolean | Optional | Show / Hide a cursor | `true` |
76-
| `cursorStyle` | String | Optional | Change the cursor style available if `cursor` is `enabled` | `\|` |
77-
| `typeSpeed` | Integer | Optional | Character typing speed in Milliseconds | `100` |
78-
| `delaySpeed` | Integer | Optional | Delay time between the words in Milliseconds | `1500` |
79-
| `deleteSpeed` | Integer | Optional | Character deleting speed in Milliseconds | `50` |
80-
| `loop` | Number \| Boolean | Optional | Control how many times to run. `0 \| false` to run infinitely | `1` |
81-
| `onLoopDone` | Function | Optional | Callback `Function` that is triggered when loops are completed. available if `loop` is `> 0` | `-` |
82-
83-
---
84-
85-
## Hook Usage
110+
## 2. Hook
86111

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

90115
const MyComponent = () => {
91-
const typewritedText = useTypewriter({
116+
/**
117+
*
118+
* @returns
119+
* text: [string] typed text
120+
* count: [number] typed word count
121+
*/
122+
const { text, count } = useTypewriter({
92123
/* Config */
93124
})
94125

95126
return (
96127
<div className='App'>
97-
<span>{typewritedText}</span>
128+
<span>{text}</span>
98129
</div>
99130
)
100131
}
101132
```
102133

103134
### Hook Config
104135

105-
| Prop | Type | Options | Description | Default |
106-
| ------------- | :---------------: | -------- | -------------------------------------------------------------------------------------------- | :------------------: |
107-
| `words` | Array | Required | Array of strings holding the words | `['Hello', 'World']` |
108-
| `typeSpeed` | Integer | Optional | Character typing speed in Milliseconds | `100` |
109-
| `delaySpeed` | Integer | Optional | Delay time between the words in Milliseconds | `1500` |
110-
| `deleteSpeed` | Integer | Optional | Character deleting speed in Milliseconds | `50` |
111-
| `loop` | Number \| Boolean | Optional | Control how many times to run. `0 \| false` to run infinitely | `1` |
112-
| `onLoopDone` | Function | Optional | Callback `Function` that is triggered when loops are completed. available if `loop` is `> 0` | `-` |
136+
| Prop | Type | Options | Description | Default |
137+
| ------------- | :---------------: | -------- | -------------------------------------------------------------------------------------------- | :----------------: |
138+
| `words` | Array | Required | Array of strings holding the words | `['Hello', '...']` |
139+
| `typeSpeed` | Number | Optional | Character typing speed in Milliseconds | `80` |
140+
| `deleteSpeed` | Number | Optional | Character deleting speed in Milliseconds | `50` |
141+
| `delaySpeed` | Number | Optional | Delay time between the words in Milliseconds | `1500` |
142+
| `loop` | Number \| Boolean | Optional | Control how many times to run. `0 \| false` to run infinitely | `1` |
143+
| `onLoopDone` | Function | Optional | Callback `Function` that is triggered when loops are completed. available if `loop` is `> 0` | `-` |
144+
| `onType` | Function | Optional | Callback `Function` that is triggered while typing | `-` |
113145

114146
### Hook Usage Example
115147

@@ -119,7 +151,7 @@ import { useTypewriter} from 'react-simple-typewriter'
119151

120152
const MyComponent = () => {
121153

122-
const text = useTypewriter({
154+
const {text} = useTypewriter({
123155
words: ['Hello', 'From', 'Typewriter', 'Hook!'],
124156
loop: {0}, // Infinit
125157
})
@@ -142,7 +174,7 @@ import { useTypewriter, Cursor} from 'react-simple-typewriter'
142174

143175
const MyComponent = () => {
144176

145-
const text = useTypewriter({
177+
const {text} = useTypewriter({
146178
words: ['Hello', 'From', 'Typewriter', 'Hook!'],
147179
loop: {3},
148180
onLoopDone: () => console.log(`loop completed after 3 runs.`),
@@ -168,7 +200,8 @@ const MyComponent = () => {
168200
### [Demo](https://react-simple-typewriter.vercel.app/)
169201

170202
<br />
171-
[![Edit react-simple-typewriter](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/broken-wind-uj8ix?fontsize=14&hidenavigation=1&theme=dark)
203+
204+
[![Edit react-simple-typewriter](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-simple-typewriter-uj8ix?fontsize=14&hidenavigation=1&theme=dark)
172205

173206
### License
174207

‎example/src/App.tsx‎

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,51 @@
1-
import { useRef } from 'react'
1+
import { useState } from 'react'
22
import { Typewriter, useTypewriter, Cursor } from 'react-smiple-typewriter'
33

4-
const App = () => {
5-
const handleDone = () => {
6-
console.log('done from typewriter component')
7-
}
8-
9-
const countRef = useRef(0)
4+
const TypewriterHook = () => {
105
const { text, count } = useTypewriter({
11-
words: ['This', 'is', 'Typewriter', 'From', 'Hook'],
6+
words: ['Hello', 'World', 'This', 'is', 'Typewriter', 'Hook'],
127
loop: 2,
13-
typeSpeed: 20,
14-
delaySpeed: 1500,
15-
deleteSpeed: 50,
8+
// typeSpeed: 20,
169
onLoopDone: () => console.log('done from typewriter hook')
1710
})
1811

12+
return (
13+
<div>
14+
<span>{text}</span>
15+
<Cursor />
16+
<hr />
17+
<div>count: {count}</div>
18+
</div>
19+
)
20+
}
21+
22+
const App = () => {
23+
const [count, setCount] = useState(0)
24+
const handleDone = () => {
25+
console.log('done from typewriter component')
26+
}
27+
const handleType = (counter: number) => {
28+
setCount(counter)
29+
console.log('this function run every type on Component')
30+
}
31+
1932
return (
2033
<div style={{ padding: 20 }}>
2134
<p>The default component</p>
2235

2336
<Typewriter
37+
words={['Hello', 'World', 'This', 'is', 'Typewriter', 'Component']}
38+
loop={1}
39+
// typeSpeed={40}
2440
cursor
25-
words={['This', 'is', 'Typewriter', 'From', 'Component']}
26-
typeSpeed={10}
2741
onLoopDone={handleDone}
28-
countRef={countRef}
42+
onType={handleType}
2943
/>
30-
<br />
31-
word count: <span>{countRef.current}</span>
3244
<hr />
33-
45+
<div>count: {count}</div>
3446
<p>A simple custom typewriter built with the hook!</p>
3547

36-
<div>
37-
<span>{text}</span>
38-
<Cursor />
39-
<br />
40-
word count: <span>{count}</span>
41-
</div>
48+
<TypewriterHook />
4249
</div>
4350
)
4451
}

‎package.json‎

Lines changed: 20 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,10 @@
1616
"scripts": {
1717
"lint": "eslint \"src/**/*.{ts,tsx}\"",
1818
"clean": "rm -rf dist",
19-
"start": "rollup -cw --exports auto",
20-
"build": "yarn clean && rollup -c --exports auto",
21-
"test": "run-s test:unit test:lint test:build",
22-
"test:build": "run-s build",
23-
"test:lint": "eslint .",
24-
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
25-
"test:watch": "react-scripts test --env=jsdom",
19+
"start:rollup": "rollup -cw --exports auto",
20+
"start:example": "cd example && yarn start",
21+
"start": "run-p start:rollup start:example",
22+
"build": "rollup -c --exports auto",
2623
"predeploy": "cd example && yarn && yarn run build",
2724
"deploy": "gh-pages -d example/build",
2825
"commit": "git cz",
@@ -33,43 +30,38 @@
3330
"react-dom": ">=16.8.0"
3431
},
3532
"devDependencies": {
36-
"@rollup/plugin-commonjs": "^19.0.0",
37-
"@rollup/plugin-node-resolve": "^13.0.0",
38-
"@testing-library/jest-dom": "^5.14.1",
39-
"@testing-library/react": "^12.0.0",
40-
"@testing-library/user-event": "^13.1.9",
41-
"@types/jest": "^26.0.23",
42-
"@types/node": "^15.12.5",
43-
"@types/react": "^17.0.13",
44-
"@types/react-dom": "^17.0.8",
45-
"@typescript-eslint/eslint-plugin": "^4.28.1",
46-
"@typescript-eslint/parser": "^4.28.1",
47-
"autoprefixer": "^10.2.6",
33+
"@rollup/plugin-commonjs": "^20.0.0",
34+
"@rollup/plugin-node-resolve": "^13.0.4",
35+
"@types/node": "^16.7.4",
36+
"@types/react": "^17.0.19",
37+
"@types/react-dom": "^17.0.9",
38+
"@typescript-eslint/eslint-plugin": "^4.29.3",
39+
"@typescript-eslint/parser": "^4.29.3",
40+
"autoprefixer": "^10.3.3",
4841
"commitizen": "^4.2.4",
49-
"cross-env": "^7.0.3",
5042
"cz-conventional-changelog": "^3.3.0",
51-
"eslint": "^7.29.0",
43+
"eslint": "^7.32.0",
5244
"eslint-config-airbnb": "^18.2.1",
5345
"eslint-config-prettier": "^8.3.0",
54-
"eslint-plugin-import": "^2.23.4",
46+
"eslint-plugin-import": "^2.24.2",
5547
"eslint-plugin-jsx-a11y": "^6.4.1",
56-
"eslint-plugin-prettier": "^3.4.0",
48+
"eslint-plugin-prettier": "^3.4.1",
5749
"eslint-plugin-react": "^7.24.0",
5850
"eslint-plugin-react-hooks": "^4.2.0",
5951
"gh-pages": "^3.2.3",
6052
"npm-run-all": "^4.1.5",
61-
"postcss": "^8.3.5",
53+
"postcss": "^8.3.6",
6254
"prettier": "^2.3.2",
6355
"react": "^17.0.2",
6456
"react-dom": "^17.0.2",
6557
"react-scripts": "^4.0.3",
66-
"rollup": "^2.52.7",
58+
"rollup": "^2.56.3",
6759
"rollup-plugin-peer-deps-external": "^2.2.4",
68-
"rollup-plugin-postcss": "^4.0.0",
60+
"rollup-plugin-postcss": "^4.0.1",
6961
"rollup-plugin-terser": "^7.0.2",
7062
"rollup-plugin-typescript2": "^0.30.0",
71-
"semantic-release": "^17.4.4",
72-
"typescript": "^4.3.5"
63+
"semantic-release": "^17.4.7",
64+
"typescript": "^4.4.2"
7365
},
7466
"keywords": [
7567
"typewriter",

‎src/.eslintrc‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)