@tmnrp/react-progressbar
@tmnrp/react-progressbar is a lightweight latest treanding markup to display the progressbar.
Features
- Configurable height, frequency and all html attributes with ease.
Examples link
https://tmnrp-react-ui.vercel.app/progressbarInstallation link
$ npm i @tmnrp/react-progressbarProperties
@tmnrp/react-progressbar (IProgressbar) is currently extended with the following properties.
| Properties | type | Description |
|---|---|---|
| frequency | number | Duration in which the progressbar should increment. |
| height | number | Height of the progressbar. |
| ...props | HTML div props | Common HTML div properties that needs to be applied to the crumb. |
IProgressbarMethods is currently extended with the following methods.
| Properties | type | Description |
|---|---|---|
| activate | function | Starts the progressbar. |
| kill | function | Stops the progressbar. |
Implementation for single page breadcrumb
import { Progressbar, IProgressbarMethods } from "@tmnrp/react-progressbar";
const App = () => {
const pbRef = useRef<IProgressbarMethods>(null);
//
return (
<div className="flex items-center justify-center w-full h-full">
<Progressbar ref={pbRef} className="bg-red-400" frequency={100} height={10} />
<button
onClick={() => {
pbRef?.current?.activate();
}}
>
Activate
</button>
<button
onClick={() => {
pbRef?.current?.kill();
}}
>
Kill
</button>
</div>
);
};
Todos
- Let me know :-)
License
MIT Tony Martin