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

Custom Store Creation

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

The custom store creation capabilities enable isolated progress store instances for complex applications with multiple independent progress bars or specialized progress tracking requirements.

Capabilities

Create Progress Instance

Factory function that creates a complete progress instance with isolated store and bound action methods.

/**
 * Creates an isolated progress store with bound action methods
 * @returns Readonly tuple containing [store, actionsObject]
 */
function createNprogress(): readonly [NprogressStore, ActionsObject];

interface ActionsObject {
  /** Start automatic progress increments */
  start(): void;
  /** Stop automatic progress increments */
  stop(): void;
  /** Reset progress to 0 and hide */
  reset(): void;
  /** Set progress to specific value */
  set(value: number): void;
  /** Increment progress by step amount */
  increment(): void;
  /** Decrement progress by step amount */
  decrement(): void;
  /** Complete progress with animation */
  complete(): void;
  /** Cleanup intervals and timeouts */
  cleanup(): void;
}

Usage Examples:

import { createNprogress } from "@mantine/nprogress";

// Create isolated progress instance
const [uploadStore, uploadActions] = createNprogress();
const [downloadStore, downloadActions] = createNprogress();

// Use different instances for different operations
function handleFileUpload() {
  uploadActions.start();
  // ... upload logic
  uploadActions.complete();
}

function handleFileDownload() {
  downloadActions.start();
  // ... download logic
  downloadActions.complete();
}

// React component with isolated store
function UploadProgress() {
  const state = useNprogress(uploadStore);
  
  return (
    <div>
      <NavigationProgress store={uploadStore} color="green" />
      <div>Upload Progress: {state.progress}%</div>
    </div>
  );
}

Store-Specific Action Functions

Action functions that operate on specific store instances for fine-grained control.

/**
 * Starts automatic progress increments for the specified store
 * @param store - The progress store to control
 */
function startNavigationProgressAction(store: NprogressStore): void;

/**
 * Stops automatic progress increments for the specified store
 * @param store - The progress store to control
 */
function stopNavigationProgressAction(store: NprogressStore): void;

/**
 * Sets progress to specific value for the specified store
 * @param value - Progress value (0-100)
 * @param store - The progress store to control
 */
function setNavigationProgressAction(value: number, store: NprogressStore): void;

/**
 * Increments progress by step amount for the specified store
 * @param store - The progress store to control
 */
function incrementNavigationProgressAction(store: NprogressStore): void;

/**
 * Decrements progress by step amount for the specified store
 * @param store - The progress store to control
 */
function decrementNavigationProgressAction(store: NprogressStore): void;

/**
 * Completes progress with animation for the specified store
 * @param store - The progress store to control
 */
function completeNavigationProgressAction(store: NprogressStore): void;

/**
 * Resets progress and hides for the specified store
 * @param store - The progress store to control
 */
function resetNavigationProgressAction(store: NprogressStore): void;

/**
 * Cleans up intervals and timeouts for the specified store
 * @param store - The progress store to control
 */
function cleanupNavigationProgressAction(store: NprogressStore): void;

Usage Examples:

import { 
  createNprogressStore,
  startNavigationProgressAction,
  completeNavigationProgressAction,
  setNavigationProgressAction
} from "@mantine/nprogress";

// Create multiple stores for different purposes
const pageLoadStore = createNprogressStore();
const dataFetchStore = createNprogressStore();
const uploadStore = createNprogressStore();

// Control each store independently
function handlePageLoad() {
  startNavigationProgressAction(pageLoadStore);
}

function handleDataFetch() {
  startNavigationProgressAction(dataFetchStore);
}

function handleUploadProgress(percentage: number) {
  setNavigationProgressAction(percentage, uploadStore);
}

// Complete specific operations
function completePageLoad() {
  completeNavigationProgressAction(pageLoadStore);
}

Advanced Usage Patterns

Multi-Stage Progress Tracking

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

// Create separate instances for different stages
const [authStore, authActions] = createNprogress();
const [dataStore, dataActions] = createNprogress();
const [uiStore, uiActions] = createNprogress();

// Multi-stage application initialization
async function initializeApp() {
  // Stage 1: Authentication
  authActions.start();
  await authenticate();
  authActions.complete();
  
  // Stage 2: Data loading
  dataActions.start();
  await loadInitialData();
  dataActions.complete();
  
  // Stage 3: UI setup
  uiActions.start();
  await setupUI();
  uiActions.complete();
}

// Render progress bars for each stage
function AppInitializer() {
  return (
    <div>
      <NavigationProgress store={authStore} color="blue" />
      <NavigationProgress store={dataStore} color="green" />
      <NavigationProgress store={uiStore} color="orange" />
    </div>
  );
}

Context-Based Progress Management

import { createContext, useContext, createNprogress } from "react";

// Create progress context
const ProgressContext = createContext<{
  uploadProgress: ReturnType<typeof createNprogress>;
  downloadProgress: ReturnType<typeof createNprogress>;
} | null>(null);

// Provider component
function ProgressProvider({ children }: { children: React.ReactNode }) {
  const uploadProgress = createNprogress();
  const downloadProgress = createNprogress();
  
  return (
    <ProgressContext.Provider value={{ uploadProgress, downloadProgress }}>
      {children}
    </ProgressContext.Provider>
  );
}

// Hook to use progress context
function useProgressContext() {
  const context = useContext(ProgressContext);
  if (!context) {
    throw new Error("useProgressContext must be used within ProgressProvider");
  }
  return context;
}

// Usage in components
function FileOperations() {
  const { uploadProgress, downloadProgress } = useProgressContext();
  const [uploadStore, uploadActions] = uploadProgress;
  const [downloadStore, downloadActions] = downloadProgress;
  
  return (
    <div>
      <NavigationProgress store={uploadStore} color="green" />
      <NavigationProgress store={downloadStore} color="blue" />
      
      <button onClick={() => uploadActions.start()}>
        Start Upload
      </button>
      <button onClick={() => downloadActions.start()}>
        Start Download
      </button>
    </div>
  );
}

Cleanup and Lifecycle Management

import { useEffect, useRef } from "react"; 
import { createNprogress } from "@mantine/nprogress";

function ManagedProgressComponent() {
  const progressRef = useRef<ReturnType<typeof createNprogress>>();
  
  // Initialize progress instance
  useEffect(() => {
    progressRef.current = createNprogress();
    
    // Cleanup on unmount
    return () => {
      if (progressRef.current) {
        const [, actions] = progressRef.current;
        actions.cleanup();
      }
    };
  }, []);
  
  const handleStart = () => {
    if (progressRef.current) {
      const [, actions] = progressRef.current;
      actions.start();
    }
  };
  
  const handleComplete = () => {
    if (progressRef.current) {
      const [, actions] = progressRef.current;
      actions.complete();
    }
  };
  
  return (
    <div>
      {progressRef.current && (
        <NavigationProgress store={progressRef.current[0]} />
      )}
      <button onClick={handleStart}>Start</button>
      <button onClick={handleComplete}>Complete</button>
    </div>
  );
}

Types

/** Actions object returned by createNprogress */
interface ActionsObject {
  start(): void;
  stop(): void;
  reset(): void;
  set(value: number): void;
  increment(): void;
  decrement(): void;
  complete(): void;
  cleanup(): void;
}

/** Return type of createNprogress function */
type CreateNprogressResult = readonly [NprogressStore, ActionsObject];