Utility to create your own NProgress bar like with React
npm install @bprogress/reactCreate your own progress bar with React
``tsx`
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.
- Next.js
- Remix
- More soon...
`tsx`
`tsx title="src/index.tsx"
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(
);
`
`tsx title="src/App.tsx"
import { useProgress } from '@bprogress/react';
function App() {
const { start, stop, pause, resume } = useProgress();
return (
export default App;
``
Go to the documentation to learn more about BProgress.
If you encounter any problems, do not hesitate to open an issue or make a PR here.
MIT