BProgress for React

Create your own progress bar with React

Import

import { ProgressProvider } from '@bprogress/react';

The @bprogress/react package is a utility that lets you easily manage a progress bar, while remaining flexible with regard to the router you're using. It doesn't automatically start the progress bar when browsing, so you'll have to manage this logic yourself, unless you're using one of the integrations below.

React Frameworks Integrations

• Next.js
• Remix
• More soon...

Usage

<ProgressProvider>...</ProgressProvider>

Example

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { ProgressProvider } from '@bprogress/react';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);
root.render(
  <React.StrictMode>
    <ProgressProvider>
      <App />
    </ProgressProvider>
  </React.StrictMode>,
);

import { useProgress } from '@bprogress/react';

function App() {
  const { start, stop, pause, resume } = useProgress();

  return (
    <div className="App">
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
      <button onClick={pause}>Pause</button>
      <button onClick={resume}>Resume</button>
    </div>
  );
}

export default App;

More information on documentation

Go to the documentation to learn more about BProgress.

Issues

If you encounter any problems, do not hesitate to open an issue or make a PR here.

LICENSE

MIT