NavigationProgress

Navigation progress bar

Source

Docs

Package

Installation

yarn add @thinker-core/mantine-nprogress

After installation import package styles at the root of your application:

import '@thinker-core/mantine-nprogress/styles.css';

Setup NavigationProgress

Render NavigationProgress anywhere in your app within MantineProvider:

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

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

Usage

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

function Demo() {
  return (
    <>
      <NavigationProgress />
      <Group justify="center">
        <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>
    </>
  );
}

Dropzone

Modals manager