@ohaeseong/react-progress-bar NPM

npm.io

https://www.npmjs.com/package/@ohaeseong/react-progress-bar

Install

  yarn add @ohaeseong/react-progress-bar

Usage

'use client' // If you want to use this package in Next.js, you have to configure it to render only on the client side.
import React from 'react';
import ProgressBar from '@ohaeseong/react-progress-bar';

function App() {

  return <ProgressBar value={80} max={100} width="100px" />; // This progress bar has 80% value
}

Props

Name	Type	Default	Description
value (required)	number	.	Percentage of completed progress bar value.
max (required)	number	.	Reference value.
width	string	auto	Width of the bar
height	string	15px	Height of the bar
margin	string	none	Margin of the bar
color	string (color code)	#E5E7E9	Color of the "non-completed" bar
trackColor	string (color code)	#706af3	Color of the completed bar
borderRadius	string	3px	Border radius of the bar
labelColor	string (color code)	#f9f9f9	Label color of the bar
labelSize	string (1rem, 12px ...)	0.8rem	Label size of the bar
labelVisible	boolean (true === show label, false === hide label)	false	Visibility of the label
transitionDuration	string (1s, 0.5s ...)	1s	Duration of the width transition
transitionTimingFunction	string (ease, ease-in, ease-in-out ...)	ease-in-out	Timing function of the width transition
labelAlignment	string (top, bottom, null === center)	null (center)	Position of the label