tessl/npm-mantine--nprogress

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

NavigationProgress Component

Name: tessl/npm-mantine--nprogress
Author: tessl

The NavigationProgress component renders a visual progress bar that can be controlled through props or external state management. It provides full customization options for appearance, behavior, and rendering location.

Capabilities

NavigationProgress Function

Main React component for rendering the navigation progress bar.

/**
 * Navigation progress bar component that displays loading progress
 * @param props - Component props including store, appearance, and behavior options
 * @returns JSX.Element rendered through OptionalPortal
 */
function NavigationProgress(props: NavigationProgressProps): JSX.Element;

Usage Examples:

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

// Basic usage with default settings
function App() {
  return <NavigationProgress />;
}

// Customized appearance
function CustomApp() {
  return (
    <NavigationProgress
      color="blue"
      size={5}
      stepInterval={300}
      initialProgress={10}
    />
  );
}

// Using custom store
import { createNprogressStore } from "@mantine/nprogress";

const customStore = createNprogressStore();

function IsolatedProgress() {
  return <NavigationProgress store={customStore} />;
}

NavigationProgressProps Interface

Complete props interface for the NavigationProgress component.

interface NavigationProgressProps extends ElementProps<'div'> {
  /** Component store, controls state. Uses default nprogressStore if not provided */
  store?: NprogressStore;
  
  /** Initial progress value. @default 0 */
  initialProgress?: number;
  
  /** Key of theme.colors or any valid CSS color. @default theme.primaryColor */
  color?: MantineColor;
  
  /** Controls height of the progress bar in pixels */
  size?: number;
  
  /** Step interval in milliseconds for automatic progress increments. Component default: 500ms, store default: 100ms. @default 500 */
  stepInterval?: number;
  
  /** Determines whether the progress bar should be rendered within Portal. @default true */
  withinPortal?: boolean;
  
  /** Props to pass down to the Portal when withinPortal is true */
  portalProps?: Omit<BasePortalProps, 'withinPortal'>;
  
  /** Progress bar z-index for layering control. @default 9999 */
  zIndex?: React.CSSProperties['zIndex'];
}

Component Properties

Static properties available on the NavigationProgress component.

/** Display name for React DevTools */
NavigationProgress.displayName: "@mantine/nprogress/NavigationProgress";

Portal Rendering Control

The component supports both portal-based and inline rendering for flexible z-index management.

Portal Rendering (default):

// Renders at document.body level with high z-index
<NavigationProgress withinPortal={true} zIndex={10000} />

// Custom portal target
<NavigationProgress 
  withinPortal={true}
  portalProps={{ target: document.getElementById('custom-root') }}
/>

Inline Rendering:

// Renders as direct child with normal stacking context
<NavigationProgress withinPortal={false} />

Color Configuration

Supports both theme-based and custom CSS colors.

// Theme colors
<NavigationProgress color="blue" />
<NavigationProgress color="red" />

// Custom CSS colors
<NavigationProgress color="#ff6b6b" />
<NavigationProgress color="rgb(255, 107, 107)" />
<NavigationProgress color="hsl(0, 100%, 71%)" />

Types

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

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

type MantineColor = string;
type NprogressStore = MantineStore<NprogressState>;