反应进度

创建自己的 进度栏 与 反应

导入

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

这个 @bprogress/react 软件包是一个 工具 这使得您可以轻松管理一个进度栏,同时对您使用的路由器保持灵活. 浏览时不会自动启动进度栏,所以你将不得不自己管理这个逻辑,除非你使用下面的一个集成.

反应框架集成

• 下一个.js
• 重混合
• 再快点...

使用量

<ProgressProvider>...</ProgressProvider>

示例

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;

有关文件的更多信息

转到 文档 学习更多关于B进步.

问题

如果你遇到任何问题,不要犹豫 打开一个问题 或制作 PR 这里。 。 。 .

自由主义

麻省理工学院