New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-simple-typewriter
Advanced tools
react-simple-typewriter - npm Package Compare versions
Comparing version 4.0.5 to 5.0.0
@@ -1,3 +0,3 @@ | ||
| export * from './Components/Typewriter'; | ||
| export * from './Components/Cursor'; | ||
| export * from './Hooks/useTypewriter'; | ||
| export * from './components/Typewriter'; | ||
| export * from './components/Cursor'; | ||
| export * from './hooks/useTypewriter'; |
@@ -1,2 +0,2 @@ | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=function(){return r=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},r.apply(this,arguments)};var o="styles-module_blinkingCursor__yugAC";!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".styles-module_blinkingCursor__yugAC{animation-duration:.8s;animation-iteration-count:infinite;animation-name:styles-module_blink__rqfaf;color:inherit;font:inherit;left:3px;line-height:inherit;opacity:1;position:relative;top:0}@keyframes styles-module_blink__rqfaf{0%{opacity:1}to{opacity:0}}");var n=function(t){var n=t.cursorStyle,i=void 0===n?"|":n,s=t.cursorColor,d=void 0===s?"inherit":s;return e.jsx("span",r({style:{color:d},className:o},{children:i}))};function i(e,t){var o,n;switch(t.type){case"SPEED":return r(r({},e),{isDeleting:!0,speed:t.payload});case"TYPE":return r(r({},e),{speed:t.speed,text:null===(o=t.payload)||void 0===o?void 0:o.substring(0,e.text.length+1)});case"DELETE":return r(r({},e),{speed:t.speed,text:null===(n=t.payload)||void 0===n?void 0:n.substring(0,e.text.length-1)});case"COUNT":return r(r({},e),{isDeleting:!1,count:e.count+1});default:return e}}var s=function(e){var r=e.words,o=void 0===r?["Hello World!","This is","a simple Typewriter"]:r,n=e.loop,s=void 0===n?1:n,d=e.typeSpeed,l=void 0===d?80:d,a=e.deleteSpeed,u=void 0===a?50:a,p=e.delaySpeed,c=void 0===p?1500:p,y=e.onLoopDone,v=e.onType,f=t.useReducer(i,{isDeleting:!1,speed:l,text:"",count:0}),h=f[0],m=h.isDeleting,T=h.speed,g=h.text,x=h.count,S=f[1],C=t.useRef(0),E=t.useRef(!1),_=t.useCallback((function(){var e=x%o.length,t=o[e];m?(S({type:"DELETE",payload:t,speed:u}),""===g&&S({type:"COUNT"})):(S({type:"TYPE",payload:t,speed:l}),v&&v(x),g===t&&(S({type:"SPEED",payload:c}),s>0&&(C.current+=1,C.current/o.length===s&&(E.current=!0))))}),[m,x,c,u,s,l,o,g,v]);return t.useEffect((function(){var e=setTimeout(_,T);return E.current&&(clearTimeout(e),y&&y()),function(){return clearTimeout(e)}}),[_,T,y]),[g,x+1]};exports.Cursor=n,exports.Typewriter=function(t){var r=t.words,o=void 0===r?["Hello World!","This is","a simple Typewriter"]:r,i=t.loop,d=void 0===i?1:i,l=t.typeSpeed,a=void 0===l?80:l,u=t.deleteSpeed,p=void 0===u?50:u,c=t.delaySpeed,y=void 0===c?1500:c,v=t.cursor,f=void 0!==v&&v,h=t.cursorStyle,m=void 0===h?"|":h,T=t.cursorColor,g=void 0===T?"inherit":T,x=t.onLoopDone,S=t.onType,C=s({words:o,loop:d,typeSpeed:a,deleteSpeed:p,delaySpeed:y,onLoopDone:x,onType:S})[0];return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:C}),f&&e.jsx(n,{cursorStyle:m,cursorColor:g})]})},exports.useTypewriter=s; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=function(){return r=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},r.apply(this,arguments)};function o(e,t){var o,n;switch(t.type){case"TYPE":return r(r({},e),{speed:t.speed,text:null===(o=t.payload)||void 0===o?void 0:o.substring(0,e.text.length+1)});case"DELAY":return r(r({},e),{speed:t.payload});case"DELETE":return r(r({},e),{speed:t.speed,text:null===(n=t.payload)||void 0===n?void 0:n.substring(0,e.text.length-1)});case"COUNT":return r(r({},e),{count:e.count+1});default:return e}}var n=function(e){var r=e.words,n=void 0===r?["Hello World!","This is","a simple Typewriter"]:r,i=e.loop,s=void 0===i?1:i,u=e.typeSpeed,l=void 0===u?80:u,c=e.deleteSpeed,d=void 0===c?50:c,a=e.delaySpeed,p=void 0===a?1500:a,y=e.onLoopDone,f=e.onType,v=e.onDelete,m=e.onDelay,h=t.useReducer(o,{speed:l,text:"",count:0}),T=h[0],g=T.speed,_=T.text,x=T.count,D=h[1],C=t.useRef(0),E=t.useRef(!1),S=t.useRef(!1),b=t.useRef(!1),k=t.useRef(!1),w=t.useCallback((function(){var e=x%n.length,t=n[e];S.current?(D({type:"DELETE",payload:t,speed:d}),""===_&&(S.current=!1,D({type:"COUNT"}))):(D({type:"TYPE",payload:t,speed:l}),b.current=!0,_===t&&(D({type:"DELAY",payload:p}),b.current=!1,k.current=!0,setTimeout((function(){k.current=!1,S.current=!0}),p),s>0&&(C.current+=1,C.current/n.length===s&&(E.current=!0)))),b.current&&f&&f(C.current),S.current&&v&&v(),k.current&&m&&m()}),[x,p,d,s,l,n,_,f,v,m]);return t.useEffect((function(){var e=setTimeout(w,g);return E.current&&clearTimeout(e),function(){return clearTimeout(e)}}),[w,g]),t.useEffect((function(){y&&E.current&&y()}),[y]),[_,{isType:b.current,isDelay:k.current,isDelete:S.current,isDone:E.current}]};var i="styles-module_blinkingCursor__yugAC",s="styles-module_blinking__9VXRT";!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".styles-module_blinkingCursor__yugAC{color:inherit;font:inherit;left:3px;line-height:inherit;opacity:1;position:relative;top:0}.styles-module_blinking__9VXRT{animation-duration:.8s;animation-iteration-count:infinite;animation-name:styles-module_blink__rqfaf}@keyframes styles-module_blink__rqfaf{0%{opacity:1}to{opacity:0}}");var u=t.memo((function(t){var o=t.cursorBlinking,n=void 0===o||o,u=t.cursorStyle,l=void 0===u?"|":u,c=t.cursorColor,d=void 0===c?"inherit":c;return e.jsx("span",r({style:{color:d},className:"".concat(i," ").concat(n?s:"")},{children:l}))}));exports.Cursor=u,exports.Typewriter=function(t){var r=t.words,o=void 0===r?["Hello World!","This is","a simple Typewriter"]:r,i=t.loop,s=void 0===i?1:i,l=t.typeSpeed,c=void 0===l?80:l,d=t.deleteSpeed,a=void 0===d?50:d,p=t.delaySpeed,y=void 0===p?1500:p,f=t.cursor,v=void 0!==f&&f,m=t.cursorStyle,h=void 0===m?"|":m,T=t.cursorColor,g=void 0===T?"inherit":T,_=t.cursorBlinking,x=void 0===_||_,D=t.onLoopDone,C=t.onType,E=t.onDelay,S=t.onDelete,b=n({words:o,loop:s,typeSpeed:c,deleteSpeed:a,delaySpeed:y,onLoopDone:D,onType:C,onDelay:E,onDelete:S})[0];return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:b}),v&&e.jsx(u,{cursorStyle:h,cursorColor:g,cursorBlinking:x})]})},exports.useTypewriter=n; | ||
| //# sourceMappingURL=index.js.map |
@@ -1,9 +0,8 @@ | ||
| export declare type State = { | ||
| export type State = { | ||
| speed: number; | ||
| text: string; | ||
| isDeleting: boolean; | ||
| count: number; | ||
| }; | ||
| export declare type Action = { | ||
| type: 'SPEED'; | ||
| export type Action = { | ||
| type: 'DELAY'; | ||
| payload: number; | ||
@@ -10,0 +9,0 @@ } | { |
| { | ||
| "name": "react-simple-typewriter", | ||
| "version": "4.0.5", | ||
| "version": "5.0.0", | ||
| "description": "A simple react component for adding a nice typewriter effect to your project.", | ||
@@ -63,3 +63,2 @@ "author": { | ||
| "rollup-plugin-typescript2": "^0.34.1", | ||
| "storybook-dark-mode": "^1.1.0", | ||
| "typescript": "^4.8.4" | ||
@@ -66,0 +65,0 @@ }, |
@@ -10,3 +10,3 @@ # React Simple Typewriter | ||
| </p> | ||
| ## Install | ||
@@ -49,13 +49,16 @@ | ||
| | Prop | Type | Options | Description | Default | | ||
| | ------------- | :---------------: | -------- | -------------------------------------------------------------------------------------------- | :----------------: | | ||
| | `words` | Array | Required | Array of strings holding the words | `['Hello', '...']` | | ||
| | `typeSpeed` | Number | Optional | Character typing speed in Milliseconds | `90` | | ||
| | `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 runs while typing | `-` | | ||
| | `cursor` | Boolean | Optional | Show / Hide a cursor | `true` | | ||
| | `cursorStyle` | String | Optional | Change the cursor style available if `cursor` is `enabled` | `\|` | | ||
| | 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 | `-` | | ||
@@ -107,2 +110,11 @@ --- | ||
| **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 | ||
@@ -113,11 +125,13 @@ import { useTypewriter } from 'react-simple-typewriter' | ||
| /** | ||
| * | ||
| * @returns | ||
| * text: [string] typed text | ||
| * count: [number] typed word count | ||
| * NEW helper: {} helper flags | ||
| */ | ||
| const [text, count] = useTypewriter({ | ||
| const [text, helper] = useTypewriter({ | ||
| /* Config */ | ||
| }) | ||
| /* Hook helper */ | ||
| const { isType, isDelete, isDelay, isDone } = helper | ||
| return ( | ||
@@ -133,11 +147,13 @@ <div className='App'> | ||
| | 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 | `-` | | ||
| | 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 | `-` | | ||
@@ -148,9 +164,8 @@ ### Hook Usage Example | ||
| import React from 'react' | ||
| import { useTypewriter} from 'react-simple-typewriter' | ||
| import { useTypewriter } from 'react-simple-typewriter' | ||
| const MyComponent = () => { | ||
| const [text] = useTypewriter({ | ||
| words: ['Hello', 'From', 'Typewriter', 'Hook!'], | ||
| loop: {0}, // Infinit | ||
| loop: 0 | ||
| }) | ||
@@ -168,14 +183,13 @@ | ||
| If you like to have the **Cursor** effect, you can `import` it as a `Component` | ||
| 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' | ||
| 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.`), | ||
| loop: 3, | ||
| onLoopDone: () => console.log(`loop completed after 3 runs.`) | ||
| }) | ||
@@ -186,3 +200,3 @@ | ||
| <span>{text}</span> | ||
| <Cursor /> | ||
| <Cursor cursorColor='red' /> | ||
| </div> | ||
@@ -195,6 +209,7 @@ ) | ||
| | Prop | Type | Options | Description | Default | | ||
| | ------------- | :----: | -------- | ----------------------- | :-------: | | ||
| | `cursorStyle` | String | Optional | Change the cursor style | `\|` | | ||
| | `cursorColor` | String | Optional | Change the cursor color | `inherit` | | ||
| | 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` | | ||
@@ -201,0 +216,0 @@ --- |
Sorry, the diff of this file is not supported yet
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by19.32%
30769
- Dev dependency count
- decreased by-3.45%
28
- Lines of code
- increased by19.74%
91
- Number of lines in readme file
- increased by7.39%
218
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes