Progress Bar

Progress Toolbar is a React component package that provides a customizable progress bar.

Features

• Customizable Progress Bar: The package provides a customizable progress bar component that can be easily integrated into React applications.

• Dynamic Value: The progress bar component allows you to set the current value dynamically, making it suitable for various use cases where progress needs to be tracked.

• Completion Callback: It supports a completion callback function, which is triggered when the progress bar reaches a specific value or completes its progress. This feature enables executing actions upon completion, such as triggering further processes or displaying notifications.

• Ease of Installation: The package is easily installable via npm, ensuring a seamless setup process for developers.

• Modern Tooling: It leverages modern tooling and technologies such as Rollup, Babel, and TypeScript to ensure efficient bundling, transpilation, and type safety.

• Type Definitions: The package includes TypeScript type definitions (*.d.ts files), providing type safety and editor support for TypeScript users.

• Customization Options: The progress bar component is highly customizable, allowing developers to adjust its appearance, colors, and styles to match their application's design and theme.

• CSS Support: The package includes CSS files for styling the progress bar, making it easy to integrate and style within React applications.

• Examples and Documentation: The package comes with examples and documentation, providing guidance on how to use the progress bar component effectively, including usage examples, customization options, and API references.

• Community Support: It encourages contributions from the community, welcomes feedback, bug reports, and feature requests, fostering collaboration and improvement of the package over time.

These features collectively make the "progress-toolbar" package a valuable tool for developers seeking to incorporate progress tracking and visualization into their React applications with ease and flexibility.

Tech Stack

Client: React, Typescript, babel, PostCSS

Server: Rollup, npm

Screenshots

Progress Bar

Installation

You can install the Progress Toolbar package via npm:

npm install progress-toolbar

Usages

To use the Progress Toolbar component in your React project, simply import it and use it in your JSX:

import React from 'react';
import { ProgressBar } from 'progress-toolbar';

const App = () => {
  return (
    <div>
      <h1>My Progress Toolbar</h1>
      <ProgressBar value={50} onComplete={() => console.log('Progress completed!')} />
    </div>
  );
}

export default App;

Props

The ProgressBar component accepts the following props:

• value (number): The current value of the progress bar (default is 0).
• onComplete (function): A callback function to be executed when the progress bar completes (default is an empty function).

Author

• @Abhishek Kumar

Git Repository Link

• Link :- https://github.com/abhikunu007/progress-toolbar

Run Locally

Clone the project

  git clone https://github.com/abhikunu007/progress-toolbar.git

Go to the project directory

  cd progress-toolbar

Install dependencies

  npm install

Start the server

  npm run start

Support

For support, email [email protected]

Feedback

If you have any feedback, please reach out to me at [email protected]