useHooks

https://www.usehooks.io/docs
Admin
A comprehensive collection of 37 custom React hooks providing utilities for state management,...
Tokens:88,770
Snippets:340
Trust Score:4.3
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install useWindowSize Hook

Source: https://www.usehooks.io/docs/use-window-size

Installs the `use-window-size` package using the `usehooks-cli` for quick setup. This is the primary method to integrate the hook into your React project.

```bash
npx usehooks-cli@latest add use-window-size
```

--------------------------------

### Installation using usehooks-cli

Source: https://www.usehooks.io/docs/use-previous

Shows how to install the hook using the usehooks-cli tool.

```bash
npx usehooks-cli@latest add use-previous
```

--------------------------------

### useSet - Installation (JavaScript)

Source: https://www.usehooks.io/docs/use-set

Shows how to install the useSet hook using npx.

```bash
npx usehooks-cli@latest add use-set
```

--------------------------------

### Basic useToggle Example

Source: https://www.usehooks.io/docs/use-toggle

A simple example demonstrating the basic usage of the useToggle hook. It shows how to get the current state and use the provided functions to toggle, set on, or set off the state.

```jsx
const { isOn, toggle, setOn, setOff } = useToggle();

return (
  <div>
    <p>Status: {isOn ? 'ON' : 'OFF'}</p>
    <button onClick={toggle}>Toggle</button>
    <button onClick={setOn}>Turn On</button>
    <button onClick={setOff}>Turn Off</button>
  </div>
);
```

--------------------------------

### Alternative installation using npm

Source: https://www.usehooks.io/docs/use-previous

Shows an alternative way for installation using npm.

```bash
npm install @workspace/hooks
```

--------------------------------

### Install useCounter Hook

Source: https://www.usehooks.io/docs/use-counter

Command line instruction to install the useCounter hook using the usehooks-cli tool.

```bash
npx usehooks-cli@latest add use-counter
```

--------------------------------

### Install useClipboard Hook

Source: https://www.usehooks.io/docs/use-clipboard

Installs the use-clipboard package using the usehooks-cli.

```bash
npx usehooks-cli@latest add use-clipboard
```

--------------------------------

### Install useToggle Hook

Source: https://www.usehooks.io/docs/use-toggle

Command to install the useToggle hook using the usehooks-cli. This is the first step to integrate the hook into your project.

```bash
npx usehooks-cli@latest add use-toggle
```

--------------------------------

### Install useLocalStorage Hook

Source: https://www.usehooks.io/docs/use-local-storage

Installs the useLocalStorage hook using the usehooks-cli. This command-line tool helps manage hook installations within your project.

```bash
npx usehooks-cli@latest add use-local-storage
```

--------------------------------

### Install useFullscreen Hook

Source: https://www.usehooks.io/docs/use-fullscreen

Installs the use-fullscreen package using the usehooks-cli. This command-line tool simplifies the process of adding hooks to your project.

```bash
npx usehooks-cli@latest add use-fullscreen
```

--------------------------------

### Installation Command

Source: https://www.usehooks.io/docs/use-lazy

CLI command to install the useLazy hook using the usehooks-cli tool. Adds the use-lazy package to your project.

```bash
npx usehooks-cli@latest add use-lazy
```

--------------------------------

### Install useClosure hook with CLI

Source: https://www.usehooks.io/docs/use-closure

Installs the useClosure hook using the usehooks CLI tool. Requires Node.js and npm to be installed. This command adds the hook to your project dependencies.

```bash
npx usehooks-cli@latest add use-closure
```

--------------------------------

### Install useRoleGuard hook

Source: https://www.usehooks.io/docs/use-role-guard

Command to install the useRoleGuard hook using the usehooks CLI. This adds the hook to your project dependencies.

```bash
npx usehooks-cli@latest add use-role-guard
```

--------------------------------

### Install use-fetch with npx

Source: https://www.usehooks.io/docs/use-fetch

This command installs the 'use-fetch' package using the usehooks-cli. It is a prerequisite for using the useFetch hook in your React project.

```bash
npx usehooks-cli@latest add use-fetch
```

--------------------------------

### Install useBarcodeDetector Hook

Source: https://www.usehooks.io/docs/use-barcode-detector

This command installs the useBarcodeDetector hook using the usehooks-cli. This is the first step before using the hook in your React project.

```bash
npx usehooks-cli@latest add use-barcode-detector
```

--------------------------------

### Counter with Initial Value Example

Source: https://www.usehooks.io/docs/use-counter

Example demonstrating useCounter with a specific initial value and custom set functionality.

```jsx
const { count, increment, set } = useCounter(10);

// Set to specific value
const handleSetToHundred = () => set(100);
```

--------------------------------

### Install useDeviceOrientation hook

Source: https://www.usehooks.io/docs/use-device-orientation

Install the use-device-orientation hook using the usehooks-cli. This command-line tool simplifies the process of adding specific hooks to your project.

```bash
npx usehooks-cli@latest add use-device-orientation
```

--------------------------------

### Install useContactPicker Hook

Source: https://www.usehooks.io/docs/use-contact-picker

Command to install the `use-contact-picker` package using the useHooks CLI. This command ensures you have the latest version of the hook added to your project.

```bash
npx usehooks-cli@latest add use-contact-picker
```

--------------------------------

### Install useWebShare Hook via usehooks CLI (bash)

Source: https://www.usehooks.io/docs/use-web-share

Run this command in your project root to add the useWebShare hook package using the usehooks CLI. It installs the necessary dependencies for the hook to work. Ensure you have Node.js and npm installed before executing.

```bash
npx usehooks-cli@latest add use-web-share
```

--------------------------------

### Install useSymbol Hook

Source: https://www.usehooks.io/docs/use-symbol

Install the useSymbol hook using the usehooks-cli. This command-line tool helps in adding specific hooks to your project.

```bash
npx usehooks-cli@latest add use-symbol
```

--------------------------------

### Install use-storage Hook with useHooks CLI

Source: https://www.usehooks.io/docs/use-storage

Installs the use-storage hook using the useHooks CLI. This is the initial step before integrating the hook into your React project.

```bash
npx usehooks-cli@latest add use-storage
```

--------------------------------

### Install useVibration Hook

Source: https://www.usehooks.io/docs/use-vibration

Install the use-vibration hook using the usehooks-cli. This command-line tool helps manage the addition of specific hooks to your project.

```bash
npx usehooks-cli@latest add use-vibration
```

--------------------------------

### Install useDeepCompareEffect Hook

Source: https://www.usehooks.io/docs/use-deep-compare-effect

Install the use-deep-compare-effect package using the usehooks-cli for your React project. This command-line tool helps manage the addition of hooks.

```bash
npx usehooks-cli@latest add use-deep-compare-effect
```

--------------------------------

### Install useIsMounted Hook with usehooks-cli

Source: https://www.usehooks.io/docs/use-is-mounted

Demonstrates how to install the `useIsMounted` hook using the `usehooks-cli` command-line interface. This is the recommended way to add hooks from the library to your project.

```bash
npx usehooks-cli@latest add use-is-mounted
```

--------------------------------

### Property Access Logging with useProxy in React

Source: https://www.usehooks.io/docs/use-proxy

This example logs all property accesses on an object using the get trap in the proxy handler. It depends on React and the useProxy hook. Inputs are the initial target object and a handler with a get method; outputs include the proxy that triggers logs on access. Limitation: Logs only on get operations.

```javascript
const { proxy } = useProxy(
  { name: 'John', age: 30 },
  {
    get(target, prop) {
      console.log(`Accessing property: ${String(prop)}`);
      return target[prop];
    }
  }
);

// Usage: proxy.name will log "Accessing property: name"
```

--------------------------------

### Installing useUserMedia Hook via CLI

Source: https://www.usehooks.io/docs/use-user-media

Use the useHooks CLI to add the useUserMedia hook to your project. This command installs the necessary package and sets up the hook. No additional inputs required; outputs the hook ready for import.

```bash
npx usehooks-cli@latest add use-user-media
```

--------------------------------

### Example: Form Validation with useUpdateEffect

Source: https://www.usehooks.io/docs/use-update-effect

Illustrates using `useUpdateEffect` for form validation in React. The validation logic runs only after the user has started interacting with the form, preventing validation errors on initial render.

```javascript
const [formData, setFormData] = useState({
  email: '',
  password: '',
  confirmPassword: ''
});
const [errors, setErrors] = useState({});

// Don't validate on initial render, only when user changes form
useUpdateEffect(() => {
  const newErrors = validateForm(formData);
  setErrors(newErrors);

  // Show validation messages only after user interaction
  if (Object.keys(newErrors).length > 0) {
    showValidationToast('Please fix the errors');
  }
}, [formData]);

const handleInputChange = (field, value) => {
  setFormData(prev => ({ ...prev, [field]: value }));
};
```

--------------------------------

### Video Chat Component with useUserMedia

Source: https://www.usehooks.io/docs/use-user-media

A React component demonstrating useUserMedia for starting and stopping camera and microphone capture in a video chat setup. Depends on React and the useUserMedia hook. Inputs include initial constraints; outputs video stream display with error handling and loading states. Limitations: Requires HTTPS and browser support for getUserMedia.

```jsx
import { useUserMedia } from '@usehooks.io/use-user-media';
import { useRef, useEffect } from 'react';

function VideoChat() {
  const videoRef = useRef(null);
  const {
    stream,
    error,
    isLoading,
    isSupported,
    startCapture,
    stopCapture
  } = useUserMedia({ video: true, audio: true });

  useEffect(() => {
    if (videoRef.current && stream) {
      videoRef.current.srcObject = stream;
    }
  }, [stream]);

  if (!isSupported) {
    return <div>getUserMedia not supported</div>;
  }

  return (
    <div>
      <video ref={videoRef} autoPlay muted />

      {error && <p style={{ color: 'red' }}>Error: {error}</p>}

      <button onClick={() => startCapture()} disabled={isLoading}>
        {isLoading ? 'Starting...' : 'Start Camera'}
      </button>

      <button onClick={stopCapture}>
        Stop Camera
      </button>
    </div>
  );
}
```

--------------------------------

### Install useGeolocation Hook

Source: https://www.usehooks.io/docs/use-geolocation

Installs the `use-geolocation` package using the useHooks CLI. This command-line tool simplifies the process of adding hooks to your project. It requires Node.js and npm/yarn to be installed.

```bash
npx usehooks-cli@latest add use-geolocation
```

--------------------------------

### Install usehooks-cli for Hook Management

Source: https://www.usehooks.io/docs/use-lazy

This command-line interface tool allows for easy installation of individual hooks or all hooks from the useHooks.io library. It simplifies the process of adding utility functions to your React projects.

```bash
npx usehooks-cli@latest add [hook-name]
```

```bash
npm install @workspace/hooks
```

--------------------------------

### Install useIsTablet Hook

Source: https://www.usehooks.io/docs/use-is-tablet

Installs the useIsTablet hook using the usehooks CLI tool. The command requires npm and adds the hook to your project. No inputs or outputs; it modifies your project dependencies.

```shell
npx usehooks-cli@latest add use-is-tablet
```

--------------------------------

### React Geolocation Hook Implementation (TypeScript)

Source: https://www.usehooks.io/docs/use-geolocation

This code defines a custom React hook `useGeolocation` that leverages the browser's Geolocation API. It manages loading states, coordinates (latitude, longitude, altitude), accuracy, speed, heading, and timestamp. It also handles potential errors and provides functions to get the current position, start watching for position changes, and stop watching. Dependencies include React's `useState`, `useEffect`, `useCallback`, and `useRef`.

```typescript
"use client"; 
import { useState, useEffect, useCallback, useRef } from "react"; 

export interface GeolocationState {
  loading: boolean;
  accuracy: number | null;
  altitude: number | null;
  altitudeAccuracy: number | null;
  heading: number | null;
  latitude: number | null;
  longitude: number | null;
  speed: number | null;
  timestamp: number | null;
  error: GeolocationPositionError | null;
}

export interface GeolocationOptions {
  enableHighAccuracy?: boolean;
  timeout?: number;
  maximumAge?: number;
}

const defaultOptions: GeolocationOptions = {
  enableHighAccuracy: false,
  timeout: Infinity,
  maximumAge: 0,
};

export function useGeolocation(options: GeolocationOptions = defaultOptions) {
  const [state, setState] = useState<GeolocationState>({
    loading: true,
    accuracy: null,
    altitude: null,
    altitudeAccuracy: null,
    heading: null,
    latitude: null,
    longitude: null,
    speed: null,
    timestamp: null,
    error: null,
  });

  const watchIdRef = useRef<number | null>(null);
  const optionsRef = useRef(options);

  // Update options ref when options change
  useEffect(() => {
    optionsRef.current = options;
  }, [options]);

  const onSuccess = useCallback((position: GeolocationPosition) => {
    setState({
      loading: false,
      accuracy: position.coords.accuracy,
      altitude: position.coords.altitude,
      altitudeAccuracy: position.coords.altitudeAccuracy,
      heading: position.coords.heading,
      latitude: position.coords.latitude,
      longitude: position.coords.longitude,
      speed: position.coords.speed,
      timestamp: position.timestamp,
      error: null,
    });
  }, []);

  const onError = useCallback((error: GeolocationPositionError) => {
    setState((prev) => ({
      ...prev,
      loading: false,
      error,
    }));
  }, []);

  const getCurrentPosition = useCallback(() => {
    if (!navigator.geolocation) {
      onError({
        code: 2,
        message: "Geolocation is not supported by this browser.",
      } as GeolocationPositionError);
      return;
    }

    setState((prev) => ({ ...prev, loading: true, error: null }));
    navigator.geolocation.getCurrentPosition(
      onSuccess,
      onError,
      optionsRef.current
    );
  }, [onSuccess, onError]);

  const startWatching = useCallback(() => {
    if (!navigator.geolocation) {
      onError({
        code: 2,
        message: "Geolocation is not supported by this browser.",
      } as GeolocationPositionError);
      return;
    }

    if (watchIdRef.current !== null) {
      navigator.geolocation.clearWatch(watchIdRef.current);
    }

    setState((prev) => ({ ...prev, loading: true, error: null }));
    watchIdRef.current = navigator.geolocation.watchPosition(
      onSuccess,
      onError,
      optionsRef.current
    );
  }, [onSuccess, onError]);

  const stopWatching = useCallback(() => {
    if (watchIdRef.current !== null) {
      navigator.geolocation.clearWatch(watchIdRef.current);
      watchIdRef.current = null;
    }
  }, []);

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      if (watchIdRef.current !== null) {
        navigator.geolocation.clearWatch(watchIdRef.current);
      }
    };
  }, []);

  return {
    ...state,
    getCurrentPosition,
    startWatching,
    stopWatching,
  };
}

```

--------------------------------

### useSet - Tag Management Example (JavaScript)

Source: https://www.usehooks.io/docs/use-set

Demonstrates how to manage a Set of tags using the useSet hook, including adding, removing, toggling, and clearing tags, as well as checking if a tag exists.

```javascript
1import { useSet } from '@usehooks.io/use-set'; 2 3function TagManager() { 4 const { 5    set: tags, 6    add, 7    remove, 8    toggle, 9    clear, 10    has, 11    size, 12    isEmpty, 13    toArray 14 } = useSet(['react', 'typescript']); 15 16 return ( 17 <div> 18 <p>Tags ({size}): {isEmpty ? 'None' : toArray().join(', ')}</p> 19 20 <button onClick={() => add('javascript')}> 21 Add JavaScript 22 </button> 23 24 <button onClick={() => toggle('vue')}> 25 Toggle Vue 26 </button> 27 28 <button onClick={() => remove('react')}> 29 Remove React 30 </button> 31 32 <button onClick={clear}> 33 Clear All 34 </button> 35 36 <p>Has React: {has('react') ? 'Yes' : 'No'}</p> 37 </div> 38 ); 39}
```
Tokens:
Raw