progress_bar_for_react

Made with Vite

Install

npm install --save progress_bar_for_react

This is a simple fully customizable react progress bar component

Author

Myron Apostolakis

Installation

npm install --save progress_bar_for_react

Import

Since the latest version (1.0.43) the import directive has changed from

import ProgressBar from "progress_bar_for_react";

import { ProgressBarContainer as ProgressBar } from 'progress_bar_for_react';

Please feel free to update your code accordingly.

Usage

<ProgressBar percentage={50} />

The option percentage is mandatory in order for the ProgressBar to display. When the percentage is equal to 100% the ProgressBar will hide itself.

List of supported Options

Option	Description
tooltip='Demo text'	If this option is set then the 'Demo text' appears as a tooltip on mouse hovering
fillerExtraStyles={{...}}	Filler extra styles will override the default styling. Usage: backgroundColor: blue or hex code
progressBarExtraStyles={{...}}	Progress Bar extra styles will override the default styling. Usage: position,height,width,borderRadius, border

Please see the src/Examples folder for more descriptive usage.

API calls

onPercentageChange

It will be triggered when a new percentage is received. Please see examples

Fork instructions

You can fork this repository for your own modifications following the bellow steps

Please follow the instructions from https://help.github.com/en/github/getting-started-with-github/fork-a-repo

Development - Storybook

Use command npm run storybook and visit http://localhost:6006. You can view the storybook online here

Testing

This component is tested using Cypress and Vite Server

You can use the following commands

npm test to run vite dev server and cypress in browser mode.
npm run test:headless to run vite dev server and cypress in headless mode.

License

This repo is licensed under GNU General Public License v3.0

Tutorial

A short tutorial can be found in the following link https://codebitshub.com/progress_bar_for_react

Changelog

v1.0.60 --> Added Typescript support, build with Vite
v1.0.55 --> Tested with React 18
v1.0.52 --> Replaced react-jss with emotion
v1.0.51 --> Tested with node version > 16.13.1
v1.0.45 --> Removed third party dependency of react-tooltip package