NavigationProgress

NavigationProgress

페이지 이동 시 상단에 표시되는 진행률 바(progress bar) 컴포넌트예요. 라우터 전환 같은 비동기 작업의 진행 상태를 시각적으로 보여줄 때 유용해요. @mantine/nprogress 패키지에서 제공되며 MIT 라이선스로 배포돼요.

출처: 문서

본문

설치

yarn add @mantine/nprogress

설치 후 애플리케이션의 루트에서 패키지 스타일을 import 해요:

import '@mantine/core/styles.css';
// ‼️ nprogress 스타일은 core 패키지 스타일 다음에 import 하세요
import '@mantine/nprogress/styles.css';

NavigationProgress 설정

NavigationProgress 컴포넌트를 MantineProvider 안에 있는 앱 어디에서든 렌더링하면 돼요:

import { MantineProvider } from '@mantine/core';
import { NavigationProgress } from '@mantine/nprogress';

function Demo() {
  return (
    <MantineProvider>
      <NavigationProgress />
      {/* Your app here */}
    </MantineProvider>
  );
}

사용법

import { Button, Group } from '@mantine/core';
import { nprogress, NavigationProgress } from '@mantine/nprogress';

function Demo() {
  return (
    <>
      <NavigationProgress />
      <Group>
        <Button onClick={() => nprogress.start()}>Start</Button>
        <Button onClick={() => nprogress.stop()}>Stop</Button>
        <Button onClick={() => nprogress.increment()}>Increment</Button>
        <Button onClick={() => nprogress.decrement()}>Decrement</Button>
        <Button onClick={() => nprogress.set(50)}>Set 50%</Button>
        <Button onClick={() => nprogress.reset()}>Reset</Button>
        <Button onClick={() => nprogress.complete()}>Complete</Button>
      </Group>
    </>
  );
}

더 알아보기 (Learn more)

• Dropzone
• Modals manager