React-speedread-component

This is a reusable component originally designed with the intent of providing speed reading capabilities to my react components. Some working examples can be found here.

How to use?

import SpeedReader from "react-speedreader-component";
import React from "react";
import { render } from "react-dom";
const App = () => (
  <SpeedReader
    article="This is the text that will be speedread."
    unreadStyle={{ color: "green" }}
    activeStyle={{ color: "orange" }}
    readStyle={{ color: "red" }}
    wpm={99}
  />
);

How it works

The example above demonstrates how the component can be used. Words are split by space, that array gets looped over, and added the active style or class, then the read style or class at a speed of x wpm. Clicking the component should pause the reading. The components can also be passed a loopmodus and a autostart boolean. I hope this is all very straight forward.