Namespace Pollution Mechanism

    react-content-progress-bar

    2.4.1 • Public • Published

    React Content Progress Bar

    Build Status dependencies Status devDependencies Status License: MIT

    Adaptative Progress Bar for all usage !

    Simple to use and to implement for your blog or website

    Usage

    Import the ProgressBar:

    import ProgressBar from "react-content-progress-bar";

    You have seven parameters available:

    • backgroundColor: Color of the progress bar background
      • default: transparent
    • callback: Function to be called when the progress bar reaches the end
      • default: () => {}
    • color: Color of the progress bar
      • default: white
    • ref: The Ref of the content you want to cover (ie. blog post, article..). (See https://reactjs.org/docs/refs-and-the-dom.html)
      • REQUIRED
    • radius (previously borderRadius): Radius of the right border side (top-right and bottom-right) (in px)
      • default: 0
    • style: Style of the progress bar (solid, dashed, dotted..)
      • default: solid
    • thickness (previously width): Thickness of the progress bar (in px)
      • default: 1

    Use it like this:

    <ProgressBar
      backgroundColor="rgba(125, 125, 125, 0.8)"
      callback={() => console.log("Reached the end of my document")}
      color="#fff"
      radius={2}
      ref={this.myRef}
      style="solid"
      thickness={3}
    />

    License

    MIT © Lorris Saint-Genez

    Install

    npm i react-content-progress-bar

    DownloadsWeekly Downloads

    163

    Version

    2.4.1

    License

    MIT

    Unpacked Size

    8.49 kB

    Total Files

    4

    Last publish

    Collaborators

    • lorrissaintgenez