{heading}

54 |
55 | npm install use-typing-effect 56 | yarn add use-typing-effect 57 | 61 | npm 62 | 63 | 67 | github 68 | 69 |
70 |
71 |
72 |
79 |       </div>
80 |       <div className="d-flex justify-content-center align-items-center my-2">
81 |         MIT ©
82 |         <a href="https://hermanya.github.io" className="ml-1">
83 |           Herman Starikov
84 |         </a>
85 |         <img
86 |           height="48"
87 |           width="48"
88 |           className="rounded d-inline-block ml-2"
89 |           alt="Herman"
90 |           src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1589206/profile/profile-512.jpg"
91 |         />
92 |       </div>
93 |     </div>
94 |   );
95 | };
96 | 
97 | export default App;
98 | 


--------------------------------------------------------------------------------
/example/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 5 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 6 |     sans-serif;
 7 |   -webkit-font-smoothing: antialiased;
 8 |   -moz-osx-font-smoothing: grayscale;
 9 | }
10 | 
11 | code {
12 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
13 |     monospace;
14 | }
15 | 


--------------------------------------------------------------------------------
/example/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import * as serviceWorker from './serviceWorker';
 6 | 
 7 | ReactDOM.render(<App />, document.getElementById('root'));
 8 | 
 9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: http://bit.ly/CRA-PWA
12 | serviceWorker.unregister();
13 | 


--------------------------------------------------------------------------------
/example/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/example/src/serviceWorker.ts:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read http://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | type Config = {
 24 |   onSuccess?: (registration: ServiceWorkerRegistration) => void;
 25 |   onUpdate?: (registration: ServiceWorkerRegistration) => void;
 26 | };
 27 | 
 28 | export function register(config?: Config) {
 29 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 30 |     // The URL constructor is available in all browsers that support SW.
 31 |     const publicUrl = new URL(
 32 |       (process as { env: { [key: string]: string } }).env.PUBLIC_URL,
 33 |       window.location.href
 34 |     );
 35 |     if (publicUrl.origin !== window.location.origin) {
 36 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 37 |       // from what our page is served on. This might happen if a CDN is used to
 38 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 39 |       return;
 40 |     }
 41 | 
 42 |     window.addEventListener('load', () => {
 43 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 44 | 
 45 |       if (isLocalhost) {
 46 |         // This is running on localhost. Let's check if a service worker still exists or not.
 47 |         checkValidServiceWorker(swUrl, config);
 48 | 
 49 |         // Add some additional logging to localhost, pointing developers to the
 50 |         // service worker/PWA documentation.
 51 |         navigator.serviceWorker.ready.then(() => {
 52 |           console.log(
 53 |             'This web app is being served cache-first by a service ' +
 54 |               'worker. To learn more, visit http://bit.ly/CRA-PWA'
 55 |           );
 56 |         });
 57 |       } else {
 58 |         // Is not localhost. Just register service worker
 59 |         registerValidSW(swUrl, config);
 60 |       }
 61 |     });
 62 |   }
 63 | }
 64 | 
 65 | function registerValidSW(swUrl: string, config?: Config) {
 66 |   navigator.serviceWorker
 67 |     .register(swUrl)
 68 |     .then(registration => {
 69 |       registration.onupdatefound = () => {
 70 |         const installingWorker = registration.installing;
 71 |         if (installingWorker == null) {
 72 |           return;
 73 |         }
 74 |         installingWorker.onstatechange = () => {
 75 |           if (installingWorker.state === 'installed') {
 76 |             if (navigator.serviceWorker.controller) {
 77 |               // At this point, the updated precached content has been fetched,
 78 |               // but the previous service worker will still serve the older
 79 |               // content until all client tabs are closed.
 80 |               console.log(
 81 |                 'New content is available and will be used when all ' +
 82 |                   'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
 83 |               );
 84 | 
 85 |               // Execute callback
 86 |               if (config && config.onUpdate) {
 87 |                 config.onUpdate(registration);
 88 |               }
 89 |             } else {
 90 |               // At this point, everything has been precached.
 91 |               // It's the perfect time to display a
 92 |               // "Content is cached for offline use." message.
 93 |               console.log('Content is cached for offline use.');
 94 | 
 95 |               // Execute callback
 96 |               if (config && config.onSuccess) {
 97 |                 config.onSuccess(registration);
 98 |               }
 99 |             }
100 |           }
101 |         };
102 |       };
103 |     })
104 |     .catch(error => {
105 |       console.error('Error during service worker registration:', error);
106 |     });
107 | }
108 | 
109 | function checkValidServiceWorker(swUrl: string, config?: Config) {
110 |   // Check if the service worker can be found. If it can't reload the page.
111 |   fetch(swUrl)
112 |     .then(response => {
113 |       // Ensure service worker exists, and that we really are getting a JS file.
114 |       const contentType = response.headers.get('content-type');
115 |       if (
116 |         response.status === 404 ||
117 |         (contentType != null && contentType.indexOf('javascript') === -1)
118 |       ) {
119 |         // No service worker found. Probably a different app. Reload the page.
120 |         navigator.serviceWorker.ready.then(registration => {
121 |           registration.unregister().then(() => {
122 |             window.location.reload();
123 |           });
124 |         });
125 |       } else {
126 |         // Service worker found. Proceed as normal.
127 |         registerValidSW(swUrl, config);
128 |       }
129 |     })
130 |     .catch(() => {
131 |       console.log(
132 |         'No internet connection found. App is running in offline mode.'
133 |       );
134 |     });
135 | }
136 | 
137 | export function unregister() {
138 |   if ('serviceWorker' in navigator) {
139 |     navigator.serviceWorker.ready.then(registration => {
140 |       registration.unregister();
141 |     });
142 |   }
143 | }
144 | 


--------------------------------------------------------------------------------
/example/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "noEmit": true,
20 |     "jsx": "preserve"
21 |   },
22 |   "include": [
23 |     "src"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "use-typing-effect",
 3 |   "version": "1.1.0",
 4 |   "description": "React hook for emulating a person typing; great for landing pages, input placeholders and more!",
 5 |   "author": "Hermanya",
 6 |   "license": "MIT",
 7 |   "repository": "Hermanya/use-typing-effect",
 8 |   "homepage": "https://Hermanya.github.io/use-typing-effect/",
 9 |   "main": "dist/index.js",
10 |   "module": "dist/index.es.js",
11 |   "jsnext:main": "dist/index.es.js",
12 |   "engines": {
13 |     "node": ">=8",
14 |     "npm": ">=5"
15 |   },
16 |   "scripts": {
17 |     "test": "cross-env CI=1 react-scripts-ts test --env=jsdom",
18 |     "test:watch": "react-scripts-ts test --env=jsdom",
19 |     "build": "rollup -c",
20 |     "start": "rollup -c -w",
21 |     "prepare": "yarn run build",
22 |     "predeploy": "cd example && yarn install && yarn run build",
23 |     "deploy": "gh-pages -d example/build"
24 |   },
25 |   "dependencies": {},
26 |   "peerDependencies": {
27 |     "react": "16.8.3"
28 |   },
29 |   "devDependencies": {
30 |     "@types/jest": "^23.3.13",
31 |     "@types/react": "^16.7.20",
32 |     "@typescript-eslint/parser": "^1.4.2",
33 |     "babel-core": "^6.26.3",
34 |     "babel-runtime": "^6.26.0",
35 |     "cross-env": "^5.2.0",
36 |     "gh-pages": "^2.0.1",
37 |     "react": "16.8.3",
38 |     "react-scripts-ts": "^3.1.0",
39 |     "rollup": "^1.1.2",
40 |     "rollup-plugin-babel": "^4.3.2",
41 |     "rollup-plugin-commonjs": "^9.2.0",
42 |     "rollup-plugin-node-resolve": "^4.0.0",
43 |     "rollup-plugin-peer-deps-external": "^2.2.0",
44 |     "rollup-plugin-typescript2": "^0.19.2",
45 |     "rollup-plugin-url": "^2.1.0",
46 |     "typescript": "^3.3.3333"
47 |   },
48 |   "files": [
49 |     "dist"
50 |   ],
51 |   "eslintConfig": {
52 |     "extends": "react-app",
53 |     "parser": "@typescript-eslint/parser",
54 |     "parserOptions": {
55 |       "ecmaFeatures": {
56 |         "jsx": true
57 |       },
58 |       "useJSXTextNode": true,
59 |       "project": "./tsconfig.json"
60 |     },
61 |     "plugins": [
62 |       "prettier"
63 |     ],
64 |     "rules": {
65 |       "prettier/prettier": "error"
66 |     }
67 |   },
68 |   "browserslist": [
69 |     ">0.2%",
70 |     "not dead",
71 |     "not ie <= 11",
72 |     "not op_mini all"
73 |   ]
74 | }
75 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import typescript from 'rollup-plugin-typescript2'
 2 | import commonjs from 'rollup-plugin-commonjs'
 3 | import external from 'rollup-plugin-peer-deps-external'
 4 | import resolve from 'rollup-plugin-node-resolve'
 5 | import url from 'rollup-plugin-url'
 6 | 
 7 | import pkg from './package.json'
 8 | 
 9 | export default {
10 |   input: 'src/index.tsx',
11 |   output: [
12 |     {
13 |       file: pkg.main,
14 |       format: 'cjs',
15 |       exports: 'named',
16 |       sourcemap: true
17 |     },
18 |     {
19 |       file: pkg.module,
20 |       format: 'es',
21 |       exports: 'named',
22 |       sourcemap: true
23 |     }
24 |   ],
25 |   plugins: [
26 |     external(),
27 |     url(),
28 |     resolve(),
29 |     typescript({
30 |       rollupCommonJSResolveHack: true,
31 |       clean: true
32 |     }),
33 |     commonjs()
34 |   ]
35 | }
36 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | export const useTypingEffect = (
 4 |   strings: string[] = [''],
 5 |   {
 6 |     loop = false,
 7 |     playbackRate = 1
 8 |   }: { loop?: boolean; playbackRate?: number } = {
 9 |     loop: false,
10 |     playbackRate: 1
11 |   }
12 | ) => {
13 |   let [{ stringIndex, characterIndex }, setState] = React.useState<{
14 |     stringIndex: number;
15 |     characterIndex: number;
16 |   }>({
17 |     stringIndex: 0,
18 |     characterIndex: 0
19 |   });
20 | 
21 |   let timeoutId: number;
22 |   const emulateKeyStroke = () => {
23 |     characterIndex++;
24 |     if (characterIndex === strings[stringIndex].length) {
25 |       characterIndex = 0;
26 |       stringIndex++;
27 |       if (stringIndex === strings.length) {
28 |         if (!loop) {
29 |           return;
30 |         }
31 |         stringIndex = 0;
32 |       }
33 |       timeoutId = window.setTimeout(emulateKeyStroke, 100 * playbackRate);
34 |     } else if (characterIndex === strings[stringIndex].length - 1) {
35 |       timeoutId = window.setTimeout(emulateKeyStroke, 2000 * playbackRate);
36 |     } else {
37 |       timeoutId = window.setTimeout(emulateKeyStroke, 100 * playbackRate);
38 |     }
39 |     setState({
40 |       characterIndex,
41 |       stringIndex
42 |     });
43 |   };
44 | 
45 |   React.useEffect(() => {
46 |     emulateKeyStroke();
47 |     return () => {
48 |       window.clearTimeout(timeoutId);
49 |     };
50 |   }, []);
51 | 
52 |   const nonBreakingSpace = '\u00A0';
53 |   return strings[stringIndex].slice(0, characterIndex + 1) || nonBreakingSpace;
54 | };
55 | export default useTypingEffect;
56 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | import ExampleComponent from './'
2 | 
3 | describe('ExampleComponent', () => {
4 |   it('is truthy', () => {
5 |     expect(ExampleComponent).toBeTruthy()
6 |   })
7 | })
8 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "outDir": "build",
 4 |     "module": "esnext",
 5 |     "target": "es5",
 6 |     "lib": ["es6", "dom", "es2016", "es2017"],
 7 |     "sourceMap": true,
 8 |     "allowJs": false,
 9 |     "jsx": "react",
10 |     "declaration": true,
11 |     "moduleResolution": "node",
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noImplicitReturns": true,
14 |     "noImplicitThis": true,
15 |     "noImplicitAny": true,
16 |     "strictNullChecks": true,
17 |     "suppressImplicitAnyIndexErrors": true,
18 |     "noUnusedLocals": true,
19 |     "noUnusedParameters": true
20 |   },
21 |   "include": ["src"],
22 |   "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]
23 | }
24 | 


--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.json",
3 |   "compilerOptions": {
4 |     "module": "commonjs"
5 |   }
6 | }


--------------------------------------------------------------------------------