Words per minutes calculator "wpm-calculator-react" React Component

A React component for calculating estimated reading time for a given text.

Installation

You can install the wpm-calculator-react package via npm or yarn:

npm i wpm-calculator-react
# OR
yarn add wpm-calculator-react

Usage

Import the wpm-calculator-react component and use it in your React application:

import React from "react";
import Wpm from "wpm-calculator-react";

function App() {
  const text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit...";
  
  return (
    <div>
      <h1>My Blog Post</h1>
      <Wpm text={text} />
      <p>{text}</p>
    </div>
  );
}

export default App;

Add text after of before Wpm

<div>
    <Wpm text={text} /> min read
</div>

Props

text (required): The text content for which you want to calculate the reading time.
className (optional): An optional CSS class to style the component.

you can add your own className and style it in your css file

<Wpm text={text} className="your-class_name"/>

or wrap with your own div and style it

<div className="your-class_name">
    <Wpm text={text} />
</div>

wpm (optional): The reading speed in words per minute (default: 183).

or add your own wpm

<Wpm text={text} wpm={250}/>

License

This project is licensed under the MIT License. See the LICENSE file for details.

Author

Created by Artsiom Pchaliankou.