tessl/npm-mantine--hooks

A comprehensive collection of 75+ React hooks for state and UI management including storage, events, browser APIs, and performance optimizations

—

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

Network & Data

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

HTTP requests and network status monitoring with loading states, error handling, and connection information.

Capabilities

useFetch

HTTP requests with loading states, error handling, and request control.

/**
 * HTTP requests with loading states and error handling
 * @param url - URL to fetch
 * @param options - Fetch options with additional configuration
 * @returns Object with data, loading state, error, and control functions
 */
function useFetch<T>(url: string, options?: UseFetchOptions): UseFetchReturnValue<T>;

interface UseFetchOptions extends RequestInit {
  autoInvoke?: boolean; // Start request immediately (default: true)
}

interface UseFetchReturnValue<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<any>;
  abort: () => void;
}

Usage Examples:

import { useFetch } from "@mantine/hooks";

function UserProfile({ userId }: { userId: string }) {
  const { data: user, loading, error, refetch } = useFetch<User>(
    `/api/users/${userId}`,
    {
      autoInvoke: true,
    }
  );
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!user) return <div>No user found</div>;
  
  return (
    <div>
      <h1>{user.name}</h1>
      <button onClick={() => refetch()}>Refresh</button>
    </div>
  );
}

// Manual fetch control
function DataManager() {
  const { data, loading, error, refetch, abort } = useFetch<ApiResponse>(
    '/api/data',
    { autoInvoke: false }
  );
  
  return (
    <div>
      <button onClick={() => refetch()} disabled={loading}>
        {loading ? 'Loading...' : 'Fetch Data'}
      </button>
      <button onClick={() => abort()}>Cancel</button>
      {error && <div>Error: {error.message}</div>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

useNetwork

Network connection information and status monitoring.

/**
 * Network connection information
 * @returns Object with connection status and network information
 */
function useNetwork(): UserNetworkReturnValue;

interface UserNetworkReturnValue {
  online: boolean;
  downlink?: number;
  downlinkMax?: number;
  effectiveType?: string;
  rtt?: number;
  saveData?: boolean;
  type?: string;
}

Usage Examples:

import { useNetwork } from "@mantine/hooks";

function NetworkStatus() {
  const network = useNetwork();
  
  return (
    <div>
      <div>Status: {network.online ? 'Online' : 'Offline'}</div>
      {network.online && (
        <>
          <div>Connection: {network.effectiveType}</div>
          <div>Downlink: {network.downlink} Mbps</div>
          <div>RTT: {network.rtt}ms</div>
          {network.saveData && <div>Save Data mode enabled</div>}
        </>
      )}
    </div>
  );
}

// Conditional data loading based on connection
function SmartImageLoader({ src, lowQualitySrc }: Props) {
  const network = useNetwork();
  
  const shouldUseLowQuality = 
    !network.online || 
    network.saveData || 
    network.effectiveType === 'slow-2g' ||
    network.effectiveType === '2g';
  
  return (
    <img 
      src={shouldUseLowQuality ? lowQualitySrc : src}
      alt="Smart loaded image"
    />
  );
}