New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket

wpm-calculator-react

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

wpm-calculator-react

A React component for calculating reading time

latest
Source
npmnpm
Version
0.0.5
Version published
Weekly downloads
2
-33.33%
Maintainers
1
Weekly downloads
 
Created
Source

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.

If you have any questions or suggestions, please feel free to open an issue or contact me at pchelenkovartem@gmail.com.

Keywords

react

FAQs

Package last updated on 05 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts