react-speed-reader
Try it - Live Example
Install
npm install react-speed-reader
Demo
Check out Live Example and the example code, or run it locally
git clone git@github.com:Radivarig/react-speed-reader.gitnpm installnpm run dev
Updates
(1.1): (breaking) function renderReader (props, state)=>ReactElement is required in props of the reader
Features
- flash one or more words
- on one word flash, show highlighted pivot letter (the red focus)
- set words per minute (WPM)
- pause after character match
- trim sentence after character match
- show blank after character match
- TODO: multiple rows
- TODO: trim by row length
Basic Usage
Check the Example GUI for full demonstration.
// ... { if !statecurrentText return <span> </span> //keep lineHeight if propschunk > 1 return <span>statecurrentText</span> var fixedLeft = position: 'absolute' display: 'inline-block' transform: 'translate(-100%)' textAlign: 'right' return <span> <span style=fixedLeft>statepre</span> <span style=color: 'red'>statemid</span> <span style=position: 'absolute'>statepost</span> </span> }// ... <SpeedReader inputText='Something to read' renderReader=thisrenderReader/*above*/ speed=250 isPlaying=True //bellow is optional trim=regex: /\.|,|\?|!/ /*trim sentence*/ offset=regex: /\.|,|\?|!/ duration: 05 /*pause for 0.5 times the WPM speed*/ blank=regex: /\.|\?|!/ duration: 05 /*show blank*/ chunk=1/*number of words per flash*/ reset=/*resets when changed, use timestamp new Date().getTime()*/ setProgress=/*{ skipFor: Int OR percent: 0 to 1, timestamp: new Date().getTime() }*/ hasEndedCallback=/*call your pause fn to sync with GUI*/ progressCallback=/*calls with {at: Int, of: Int}*/ />
License
MIT