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.git
npm install
npm 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.
renderReader(props, state) {
if ( !state.currentText )
return <span> </span>
if (props.chunk > 1)
return <span>{state.currentText}</span>
var fixedLeft = {
position: 'absolute'
, display: 'inline-block'
, transform: 'translate(-100%)'
, textAlign: 'right'
}
return (
<span>
<span style={fixedLeft}>{state.pre}</span>
<span style={{color: 'red'}}>{state.mid}</span>
<span style={{position: 'absolute'}}>{state.post}</span>
</span>
)
}
<SpeedReader
inputText={'Something to read'}
renderReader={this.renderReader}
speed={250}
isPlaying={True}
trim={{regex: /\.|,|\?|!/} }
offset={{regex: /\.|,|\?|!/, duration: 0.5} }
blank={{regex: /\.|\?|!/, duration: 0.5} }
chunk={1}
reset={{}}
setProgress={{}}
hasEndedCallback={{}}
progressCallback={{}}
/>
License
MIT