or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

custom-store-creation.mdimperative-progress-control.mdindex.mdnavigation-progress-component.mdprogress-state-management.md
tile.json

tessl/npm-mantine--nprogress

Navigation progress bar component for React applications with Mantine UI framework integration

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@mantine/nprogress@8.2.x

To install, run

npx @tessl/cli install tessl/npm-mantine--nprogress@8.2.0

index.mddocs/

Mantine Navigation Progress

Mantine Navigation Progress is a React library that provides a navigation progress bar component for indicating page loading or navigation status in web applications. It integrates seamlessly with the Mantine UI framework and offers both declarative React component patterns and imperative control methods for maximum flexibility in implementation.

Package Information

  • Package Name: @mantine/nprogress
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @mantine/nprogress @mantine/core @mantine/hooks

Core Imports

import { NavigationProgress } from "@mantine/nprogress";
import { startNavigationProgress, completeNavigationProgress } from "@mantine/nprogress";

For CommonJS:

const { NavigationProgress, startNavigationProgress, completeNavigationProgress } = require("@mantine/nprogress");

Basic Usage

import { NavigationProgress, startNavigationProgress, completeNavigationProgress } from "@mantine/nprogress";
import "@mantine/nprogress/styles.css";

// Add the component to your app
function App() {
  return (
    <div>
      <NavigationProgress />
      {/* Your app content */}
    </div>
  );
}

// Control progress programmatically
function handleNavigation() {
  startNavigationProgress();
  
  // Simulate async operation
  setTimeout(() => {
    completeNavigationProgress();
  }, 2000);
}

Architecture

Mantine Navigation Progress is built around several key components:

  • NavigationProgress Component: Declarative React component for rendering the progress bar with customizable appearance
  • Progress Store System: State management using @mantine/store for progress tracking and lifecycle
  • Action Functions: Imperative API for controlling progress (start, stop, set, complete, etc.)
  • Portal Rendering: Optional portal-based rendering for proper z-index layering
  • Default Store Instance: Shared global store for simple usage scenarios

Capabilities

NavigationProgress Component

Main React component for rendering the navigation progress bar with full customization options including colors, sizing, portal rendering, and z-index control.

function NavigationProgress(props: NavigationProgressProps): JSX.Element;

interface NavigationProgressProps extends ElementProps<'div'> {
  store?: NprogressStore;
  initialProgress?: number;
  color?: MantineColor;
  size?: number;
  stepInterval?: number;
  withinPortal?: boolean;
  portalProps?: Omit<BasePortalProps, 'withinPortal'>;
  zIndex?: React.CSSProperties['zIndex'];
}

NavigationProgress Component

Progress State Management

Core store system providing state management for progress tracking, with hooks for React integration and state subscription.

type NprogressStore = MantineStore<NprogressState>;

interface NprogressState {
  mounted: boolean;
  progress: number;
  interval: number;
  step: number;
  stepInterval: number;
  timeouts: number[];
}

function createNprogressStore(): NprogressStore;
function useNprogress(store: NprogressStore): NprogressState;

Progress State Management

Imperative Progress Control

Action functions for programmatic control of progress state, enabling integration with routing libraries and custom navigation flows.

function startNavigationProgress(): void;
function stopNavigationProgress(): void;
function setNavigationProgress(value: number): void;
function incrementNavigationProgress(): void;
function decrementNavigationProgress(): void;
function completeNavigationProgress(): void;
function resetNavigationProgress(): void;
function cleanupNavigationProgress(): void;

Imperative Progress Control

Custom Store Creation

Factory functions for creating isolated progress store instances, useful for multiple independent progress bars or complex applications.

function createNprogress(): readonly [NprogressStore, ActionsObject];

interface ActionsObject {
  start(): void;
  stop(): void;
  reset(): void;
  set(value: number): void;
  increment(): void;
  decrement(): void;
  complete(): void;
  cleanup(): void;
}

Custom Store Creation

Global Types

type MantineColor = string;

interface ElementProps<T extends keyof HTMLElementTagNameMap> 
  extends React.ComponentPropsWithoutRef<T> {}

interface BasePortalProps {
  withinPortal?: boolean;
  target?: HTMLElement | string;
  children: React.ReactNode;
}