UNPKG

react-progressbar-cs

Version:

An Progressbar components.

55 lines (39 loc) 1.43 kB
## Getting started ### Compatibility Your project needs to use React 16.8 or later. ### Installation Add react-progressbar to your project by executing npm install react-progressbar-cs or yarn add react-progressbar-cs. ### Usage Here's an example of basic usage: ```tsx import { useState, useEffect } from 'react'; import Progressbar from 'react-progressbar-cs'; import "react-progressbar-cs/dist/progressbar.css"; function MyApp() { const [progress, setProgress] = useState(0); useEffect(() => { const timer = setInterval(() => { setProgress((prevProgress) => { if (prevProgress >= 100) { clearInterval(timer); return 100; } const randomIncrement = Math.floor(Math.random() * 5) + 1; return Math.min(prevProgress + randomIncrement, 100); }); }, 1000); return ( <div style={{ textAlign: "center", marginTop: "50px" }}> <h2>Linear Progress</h2> <div style={{ justifyContent: "center", display: "flex" }}> <Progressbar progress={progress} type="linear" width="300px" height="25px" textSize={16} /> </div> <h2 style={{ marginTop: "50px" }}>Circular Progress</h2> <Progressbar progress={progress} type="circle" circleSize={150} strokeWidth={10} textSize={20} /> </div> ); } ``` ## License The MIT License. ## Thank you