├── .babelrc ├── .eslintrc ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── package.json ├── src ├── SpeedReader.jsx ├── Viewer.jsx ├── index.html └── viewer.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env", 4 | "react", 5 | ], 6 | "plugins": [ 7 | "transform-class-properties", 8 | ] 9 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "parserOptions": { 4 | "sourceType": "module", 5 | "ecmaFeatures": { 6 | "jsx": true 7 | } 8 | }, 9 | "env": { 10 | "es6": true, 11 | "browser": true, 12 | "commonjs": true, 13 | }, 14 | "plugins": [ 15 | "react", 16 | "jsx-control-statements", 17 | ], 18 | "extends": [ 19 | "eslint:recommended", 20 | "plugin:react/recommended", 21 | "plugin:jsx-control-statements/recommended", 22 | ], 23 | "rules": { 24 | "object-curly-spacing": [2, "always"], 25 | "no-console": 1, 26 | "no-unused-vars": 1, 27 | "quotes": 2, 28 | "quote-props": 2, 29 | "func-call-spacing": [2, "always"], 30 | "strict": [2, "global"], 31 | "semi": [2, "never"], 32 | "no-tabs": 2, 33 | "no-template-curly-in-string": 2, 34 | "no-unsafe-negation": 2, 35 | "accessor-pairs": [2, {"getWithoutSet": true}], 36 | "array-callback-return": 2, 37 | "block-scoped-var": 2, 38 | "class-methods-use-this": [2, { "exceptMethods": [] }], 39 | "eqeqeq": 2, 40 | "no-prototype-builtins": 2, 41 | "no-else-return": 2, 42 | "no-global-assign": [2, {"exceptions": []}], 43 | "no-implicit-globals": 2, 44 | "no-loop-func": 2, 45 | "no-fallthrough": 2, 46 | "no-floating-decimal": 2, 47 | "no-return-assign": 2, 48 | "no-sequences": 2, 49 | "no-unmodified-loop-condition": 2, 50 | "no-unused-expressions": [2, { "allowShortCircuit": true, "allowTernary": true }], 51 | "no-useless-call": 2, 52 | "no-useless-concat": 2, 53 | "no-useless-escape": 2, 54 | "no-useless-return": 2, 55 | "no-void": 2, 56 | "no-with": 2, 57 | "yoda": [2, "never", { "exceptRange": true }], 58 | "no-shadow-restricted-names": 2, 59 | "no-shadow": [2, { "builtinGlobals": true, "hoist": "all", "allow": [] }], 60 | "no-use-before-define": ["error", { "functions": true, "classes": true }], 61 | "comma-dangle": [2, "always-multiline"], 62 | "comma-style": [2, "last", { "exceptions": {} }], 63 | "eol-last": 2, 64 | "indent": [2, 2], 65 | "key-spacing": 2, 66 | "new-cap": 2, 67 | "new-parens": 2, 68 | "no-array-constructor": 2, 69 | "no-lonely-if": 2, 70 | "no-mixed-operators": 2, 71 | "no-multiple-empty-lines": [2, {max: 1}], 72 | "no-nested-ternary": 2, 73 | "no-unneeded-ternary": 2, 74 | "no-trailing-spaces": 2, 75 | "no-whitespace-before-property": 2, 76 | "operator-assignment": 2, 77 | "space-before-function-paren": 2, 78 | "space-before-blocks": 2, 79 | "space-in-parens": 2, 80 | "space-infix-ops": 2, 81 | "wrap-regex": 2, 82 | "arrow-body-style": 2, 83 | "arrow-parens": 2, 84 | "arrow-spacing": 2, 85 | "no-confusing-arrow": 2, 86 | "no-duplicate-imports": 2, 87 | "no-useless-computed-key": 2, 88 | "no-useless-rename": 2, 89 | "no-var": 2, 90 | "object-shorthand": 2, 91 | "prefer-arrow-callback": 2, 92 | "prefer-const": 2, 93 | "prefer-rest-params": 2, 94 | "prefer-spread": 2, 95 | "prefer-template": 2, 96 | "rest-spread-spacing": 2, 97 | "symbol-description": 2, 98 | "template-curly-spacing": 2, 99 | 100 | "react/display-name": 0, 101 | "react/forbid-component-props": [2, { "forbid": [ 102 | "className", 103 | "style", 104 | ] }], 105 | "react/no-children-prop": 2, 106 | "react/no-danger": 2, 107 | "react/no-danger-with-children": 2, 108 | "react/no-did-mount-set-state": [2, "disallow-in-func"], 109 | "react/no-did-update-set-state": 2, 110 | "react/no-direct-mutation-state": 2, 111 | "react/no-find-dom-node": 0, 112 | "react/no-is-mounted": 2, 113 | "react/no-render-return-value": 2, 114 | "react/no-string-refs": 2, 115 | "react/no-unescaped-entities": 2, 116 | "react/no-unknown-property": 2, 117 | "react/no-unused-prop-types": 2, 118 | "react/prop-types": 0, 119 | "react/react-in-jsx-scope": 2, 120 | "react/require-render-return": 2, 121 | "react/self-closing-comp": 2, 122 | "react/style-prop-object": 2, 123 | 124 | "react/jsx-closing-bracket-location": 2, 125 | "react/jsx-curly-spacing": 2, 126 | "react/jsx-equals-spacing": 2, 127 | "react/jsx-filename-extension": 0, 128 | "react/jsx-first-prop-new-line": [2, "multiline-multiprop"], 129 | "react/jsx-indent": [2, 2], 130 | "react/jsx-indent-props": [2, 2], 131 | "react/jsx-key": 2, 132 | "react/jsx-max-props-per-line": [2, {maximum: 3}], 133 | "react/jsx-no-comment-textnodes": 2, 134 | "react/jsx-no-duplicate-props": 2, 135 | "react/jsx-no-target-blank": 2, 136 | "react/jsx-pascal-case": 2, 137 | "react/jsx-tag-spacing": 2, 138 | "react/jsx-uses-react": 2, 139 | "react/jsx-uses-vars": 2, 140 | 141 | "react/jsx-no-undef": 0, 142 | "jsx-control-statements/jsx-jcs-no-undef": 2, 143 | }, 144 | } 145 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | /index.html 4 | dist/ 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Radivarig/react-speed-reader/14ce4bef45cc717e6b5f270f0c77e73cc4b9de7b/.npmignore -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Reslav Hollos 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-speed-reader 2 | 3 | Try it - [Live Example](https://radivarig.github.io/#/react-speed-reader) 4 | 5 | ![](http://i.imgur.com/M8Aw9Gh.gif) 6 | 7 | ### Install 8 | 9 | `npm install react-speed-reader` 10 | 11 | ### Demo 12 | 13 | Check out [Live Example](https://radivarig.github.io/#/react-speed-reader) and the [example code](https://github.com/Radivarig/react-speed-reader/blob/master/src/SpeedReaderViewer.jsx), or run it locally 14 | ```bash 15 | git clone git@github.com:Radivarig/react-speed-reader.git 16 | npm install 17 | npm run dev 18 | ``` 19 | 20 | ### Updates 21 | 22 | (**1.1**): (**breaking**) function **renderReader** _(props, state)=>ReactElement_ is required in props of the reader 23 | 24 | ### Features 25 | 26 | - **flash** one or _more_ words 27 | - on **one** word flash, show highlighted **pivot** letter (the **red** focus) 28 | - set words per minute (**WPM**) 29 | - **pause** after character match 30 | - **trim** sentence after character match 31 | - show **blank** after character match 32 | - TODO: multiple rows 33 | - TODO: trim by row length 34 | 35 | ### Basic Usage 36 | 37 | Check the [Example GUI](https://github.com/Radivarig/react-speed-reader/blob/master/src/SpeedReaderViewer.jsx) for full demonstration. 38 | ```javascript 39 | // ... 40 | renderReader(props, state) { 41 | if ( !state.currentText ) 42 | return   //keep lineHeight 43 | 44 | if (props.chunk > 1) 45 | return {state.currentText} 46 | 47 | var fixedLeft = { 48 | position: 'absolute' 49 | , display: 'inline-block' 50 | , transform: 'translate(-100%)' 51 | , textAlign: 'right' 52 | } 53 | return ( 54 | 55 | {state.pre} 56 | {state.mid} 57 | {state.post} 58 | 59 | ) 60 | } 61 | // ... 62 | 81 | ``` 82 | 83 | ### License 84 | 85 | MIT 86 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-speed-reader", 3 | "version": "1.3.0", 4 | "description": "Speed Reader component for React", 5 | "author": "Reslav Hollos (http://radivarig.github.io)", 6 | "license": "MIT", 7 | "main": "./dist/main.js", 8 | "scripts": { 9 | "prepublish": "npm run build", 10 | "dev": "NODE_ENV=development webpack-dev-server --mode development ./src/viewer.js", 11 | "build": "webpack --mode production" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git@github.com:Radivarig/react-speed-reader.git" 16 | }, 17 | "keywords": [ 18 | "react", 19 | "reactjs", 20 | "react-component", 21 | "speed reader", 22 | "reading" 23 | ], 24 | "devDependencies": { 25 | "babel-core": "^6.26.0", 26 | "babel-eslint": "^8.2.2", 27 | "babel-loader": "^7.1.4", 28 | "babel-plugin-transform-class-properties": "^6.24.1", 29 | "babel-preset-env": "^1.6.1", 30 | "babel-preset-react": "^6.24.1", 31 | "css-loader": "^0.28.10", 32 | "eslint": "^4.18.2", 33 | "eslint-loader": "^2.0.0", 34 | "eslint-plugin-jsx-control-statements": "^2.2.0", 35 | "eslint-plugin-react": "^7.7.0", 36 | "html-loader": "^0.5.5", 37 | "html-webpack-plugin": "^3.0.6", 38 | "style-loader": "^0.20.2", 39 | "webpack": "^4.1.0", 40 | "webpack-cli": "^2.0.10", 41 | "webpack-dev-server": "^3.1.0" 42 | }, 43 | "peerDependencies": { 44 | "prop-types": "^15.5.0", 45 | "react-dom": "^15.5.0", 46 | "react": "^15.5.0" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/SpeedReader.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import PropTypes from "prop-types" 3 | 4 | class SpeedReader extends React.Component { 5 | static propTypes = { 6 | "inputText": PropTypes.string.isRequired, 7 | "renderReader": PropTypes.func.isRequired, 8 | "isPlaying": PropTypes.bool.isRequired, 9 | "speed": PropTypes.number.isRequired, 10 | "chunk": PropTypes.number, 11 | } 12 | 13 | static defaultProps = { 14 | "chunk": 1, 15 | } 16 | 17 | constructor (props) { 18 | super (props) 19 | 20 | this.state = this.getDefaultState () 21 | } 22 | 23 | getDefaultState = () => { 24 | const words = this.getWords (this.props.inputText) 25 | const currentText = words.slice (0, this.props.chunk).join (" ") 26 | 27 | return Object.assign (this.getWordParts (currentText), { 28 | "current": 0, 29 | words, 30 | currentText, 31 | }) 32 | } 33 | 34 | componentWillReceiveProps = (nextProps) => { 35 | if (!this.props.isPlaying && nextProps.isPlaying) 36 | this.loop () 37 | 38 | if (this.props.setProgress && 39 | this.props.setProgress.timestamp !== 40 | nextProps.setProgress.timestamp) 41 | this.handleSetProgress (nextProps.setProgress) 42 | 43 | if(this.props.reset !== nextProps.reset) { 44 | this.setState (this.getDefaultState (nextProps)) 45 | 46 | if (this.props.progressCallback) 47 | this.props.progressCallback ({ 48 | "at": 0, 49 | "of": this.state.words.length || 1, 50 | }) 51 | 52 | this.loop () 53 | } 54 | } 55 | 56 | handleSetProgress = (setProgress) => { 57 | const l = this.state.words.length - 1 58 | let current, percent 59 | if (setProgress.skipFor) { 60 | current = this.state.current + setProgress.skipFor 61 | if (current < 0) current = 0 62 | if (current > l) current = l 63 | this.setState ({ current }) 64 | } 65 | else if (setProgress.percent) { 66 | percent = setProgress.percent 67 | if (percent < 0) percent = 0 68 | if (percent > 100) percent = 100 69 | this.setState ({ "current": Math.floor (percent / 100 * l) }) 70 | } 71 | else return 72 | 73 | this.offset = 0 74 | this.blank = 0 75 | this.loop ({ 76 | "skip": true, 77 | "skipFor": setProgress.skipFor !== undefined, 78 | "skipPercent": percent === 0 || current === 0, 79 | }) 80 | } 81 | 82 | getWords = (sentence) => sentence.split (/\s+/).filter (Boolean) 83 | 84 | componentDidMount = () => { 85 | this.loop () 86 | } 87 | 88 | offset: 0 89 | 90 | blank: 0 91 | 92 | lastLoopId: undefined 93 | 94 | getWordParts = (currentText) => { 95 | const word = currentText.split ("") 96 | const pivot = this.pivot (currentText) 97 | return { 98 | "pre": word.slice (0, pivot), 99 | "mid": word[pivot], 100 | "post": word.slice (pivot + 1), 101 | } 102 | } 103 | 104 | loop = (opts) => { 105 | opts = opts || {} 106 | const ms = opts.skip ? 0 : 60000 / this.props.speed 107 | clearTimeout (this.lastLoopId) 108 | this.lastLoopId = setTimeout (() => { 109 | if(!opts.skip && !opts.skipFor && !this.props.isPlaying) return 110 | 111 | if (this.blank) { 112 | this.setState ({ "currentText": "", "pre": "", "mid": "", "post": "" }) 113 | this.offset = this.blank - ms 114 | this.blank = 0 115 | return this.loop () 116 | } 117 | 118 | const chunk = this.props.chunk 119 | let current = this.state.current + chunk 120 | const words = this.state.words 121 | const l = words.length - 1 122 | 123 | let currentStart = current - (chunk < l ? chunk : l) 124 | let currentTextWords = words.slice (currentStart, current) 125 | 126 | if(this.props.trim) { 127 | for(let i = 0; i < currentTextWords.length; ++i) { 128 | const w = currentTextWords[i] 129 | if(w.search (this.props.trim.regex) !== -1) { 130 | const cnt = i + 1 131 | currentTextWords = currentTextWords.slice (0, cnt) 132 | current = this.state.current + cnt 133 | break 134 | } 135 | } 136 | } 137 | const currentText = currentTextWords.join (" ") 138 | 139 | if (this.props.offset && this.props.offset.regex.test (currentText)) 140 | this.offset = (this.props.offset.duration || 1) * ms 141 | else this.offset = 0 142 | 143 | if (this.props.blank && this.props.blank.regex.test (currentText)) 144 | this.blank = (this.props.blank.duration || 1) * ms 145 | 146 | this.setState (Object.assign (this.getWordParts (currentText), { 147 | currentText, 148 | "current": opts.skip ? this.state.current : current, 149 | })) 150 | 151 | currentStart += opts.skipPercent ? 0 : chunk 152 | 153 | const wordsCount = l + 1 154 | if (this.props.progressCallback) 155 | this.props.progressCallback ({ 156 | "at": currentStart > wordsCount ? wordsCount : currentStart, 157 | "of": wordsCount || 1, 158 | }) 159 | 160 | if(currentStart < wordsCount) { 161 | if (!opts.skip || opts.skipFor) this.loop () 162 | } 163 | else if (this.props.hasEndedCallback) 164 | this.props.hasEndedCallback () 165 | }, ms + this.offset) 166 | } 167 | 168 | //eslint-disable-next-line 169 | pivot = (x) => (x.length !== 1) ? Math.floor ((x.length / 7) + 1) : 0 170 | 171 | render = () => this.props.renderReader (this.props, this.state) 172 | 173 | } 174 | 175 | export default SpeedReader 176 | -------------------------------------------------------------------------------- /src/Viewer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import SpeedReader from "./SpeedReader.jsx" 3 | 4 | class SpeedReaderViewer extends React.Component { 5 | getDefaultState = () => ({ 6 | "inputText": "Science, what is it all about?\nTechmology, what is that all about?\nIs it good?\nIs it wacked?\nIs it good, is it wacked?\nWhat is it all about?\n\n- Ali G", 7 | "isPlaying": false, 8 | "resetTs": undefined, 9 | "speed": 250, 10 | "chunk": 1, 11 | "setProgress": { "timestamp": undefined }, 12 | }) 13 | 14 | state = this.getDefaultState () 15 | 16 | toggleIsPlaying = () => { 17 | document.activeElement.blur () 18 | const isPlaying = this.state.isPlaying 19 | this.setState ({ "isPlaying": !isPlaying }) 20 | } 21 | 22 | reset = (opts) => { 23 | if (!(opts || {}).skipBlur) 24 | document.activeElement.blur () 25 | this.setState ({ 26 | "isPlaying": false, 27 | "resetTs": new Date ().getTime (), 28 | }) 29 | } 30 | 31 | increaseChunk = () => { 32 | this.alterChunk (1) 33 | } 34 | 35 | decreaseChunk = () => { 36 | this.alterChunk (-1) 37 | } 38 | 39 | setInputText = (e) => { 40 | this.setState ({ "inputText": e.target.value }, 41 | () => {this.reset ({ "skipBlur": true })}) 42 | } 43 | 44 | setSpeed = (e) => { 45 | const v = e.target ? e.target.value : e 46 | if(isNaN (v) || v < 0) return 47 | this.setState ({ "speed": parseInt (v || 0) }) 48 | } 49 | 50 | alterChunk = (x) => { 51 | document.activeElement.blur () 52 | const chunk = this.clamp (this.state.chunk + x, 1, 3) 53 | this.setState ({ chunk }, this.reset) 54 | } 55 | 56 | clamp = (x, min, max) => { 57 | if(x < min) return min 58 | if(x > max) return max 59 | return x 60 | } 61 | 62 | progress = (x) => { 63 | this.setState ({ "progress": x }) 64 | } 65 | 66 | dragTarget: undefined 67 | 68 | setProgressPercent = (e) => { 69 | if (this.dragTarget) { 70 | window.getSelection ().removeAllRanges () 71 | const rect = this.dragTarget.getBoundingClientRect () 72 | const percent = (e.clientX - rect.left) * 100 / rect.width 73 | const setProgress = { 74 | percent, 75 | "timestamp": new Date ().getTime (), 76 | } 77 | this.setState ({ setProgress }) 78 | } 79 | } 80 | 81 | setProgressSkipFor = (x) => { 82 | const setProgress = { 83 | "skipFor": x, 84 | "timestamp": new Date ().getTime (), 85 | } 86 | this.setState ({ setProgress }) 87 | } 88 | 89 | progressBar = (progress) => { 90 | const chunks = 25 91 | const ratio = progress ? progress.at / progress.of : 0 92 | const integerPart = Math.floor (ratio * chunks) 93 | let progressBar = new Array (integerPart + 1).join ("#") 94 | progressBar += new Array (chunks - integerPart + 1).join ("_") 95 | return { 96 | "bar": `[${progressBar}]`, 97 | "percent": `${(ratio * 100).toFixed (0)}%`, 98 | } 99 | } 100 | 101 | componentDidMount = () => { 102 | document.addEventListener ("mousemove", this.setProgressPercent) 103 | document.addEventListener ("click", this.removeDragTarget) 104 | document.addEventListener ("keydown", this.handleShortcuts) 105 | } 106 | 107 | componentWillUnmount = () => { 108 | document.removeEventListener ("mousemove", this.setProgressPercent) 109 | document.removeEventListener ("click", this.removeDragTarget) 110 | document.removeEventListener ("keydown", this.handleShortcuts) 111 | } 112 | 113 | handleShortcuts = (e) => { 114 | if (document.activeElement.tagName !== "BODY") 115 | return 116 | 117 | const skipFor = 3 118 | const chgSpeed = 10 119 | 120 | if(e.keyCode === 32) //space 121 | this.setState ({ "isPlaying": !this.state.isPlaying }) 122 | 123 | if(e.keyCode === 37) { //left 124 | if (e.ctrlKey) this.reset () 125 | else this.setProgressSkipFor (-skipFor) 126 | } 127 | if(e.keyCode === 39) //right 128 | this.setProgressSkipFor (skipFor) 129 | 130 | if(e.keyCode === 38) //up 131 | this.setSpeed (this.state.speed + chgSpeed) 132 | 133 | if(e.keyCode === 40) //down 134 | this.setSpeed (this.state.speed - chgSpeed) 135 | } 136 | 137 | removeDragTarget = () => { 138 | this.dragTarget = undefined 139 | } 140 | 141 | setDragTarget = (e) => { 142 | this.dragTarget = e.target 143 | this.setProgressPercent (e) 144 | } 145 | 146 | renderReader = (props, state) => { 147 | if (!state.currentText) 148 | return   149 | 150 | if (props.chunk > 1) 151 | return {state.currentText} 152 | 153 | const fixedLeft = { 154 | "position": "absolute", 155 | "display": "inline-block", 156 | "transform": "translate(-100%)", 157 | "textAlign": "right", 158 | } 159 | return ( 160 | 161 | {state.pre} 162 | {state.mid} 163 | {state.post} 164 | 165 | ) 166 | } 167 | 168 | render = () => { 169 | const outerStyle = { 170 | "display": "inline-block", 171 | "height": 150, 172 | "width": 300, 173 | } 174 | 175 | const frameStyle = { 176 | "border": "solid", 177 | "borderWidth": 1, 178 | "borderLeftStyle": "none", 179 | "borderRightStyle": "none", 180 | "position": "relative", 181 | "top": "50%", 182 | "transform": "translateY(-51%)", // -1% for snap to pixel.. 183 | "backgroundColor": "#FFF", 184 | } 185 | 186 | const speedReaderStyle = { 187 | "transform": `translate(${this.state.chunk === 1 ? -10 : 0}%)`, 188 | "fontSize": "200%", 189 | } 190 | 191 | const progressBar = this.progressBar (this.state.progress) 192 | return ( 193 |
194 |
195 |
196 |
197 | reactElement*/} 199 | inputText={this.state.inputText} 200 | speed={this.state.speed || this.getDefaultState ().speed} 201 | isPlaying={this.state.isPlaying} 202 | setProgress={this.state.setProgress} 203 | hasEndedCallback={this.pause} 204 | progressCallback={this.progress} 205 | chunk={this.state.chunk} 206 | reset={this.state.resetTs} 207 | trim={{ "regex": /\.|,|\?|!/ }} 208 | offset={{ "regex": /\.|,|\?|!/, "duration": 0.5 }} 209 | blank={{ "regex": /\.|\?|!/, "duration": 0.5 }} 210 | /> 211 |
212 |
213 |
214 | 215 |
216 | {progressBar.bar} 217 | {progressBar.percent} 218 |
219 | 220 |
221 | 222 | 223 |
224 | 225 |
226 | 227 | words per flash: {this.state.chunk} 228 | 229 |
230 | 231 |
232 | 238 | WPM 239 |
240 | 241 |