react-usehooks-ts
TypeScript icon, indicating that this package has built-in type declarations

1.0.13 • Public • Published

react-usehooks-ts

A collections of typescript supported React Custom Hooks

NPM

Table of Contents

Installation

Getting started with React useHooks ts is as easy as 1-2-3! Simply run the following command:

npm install react-usehooks-ts

And just like that, you're ready to harness the power of React useHooks ts in your applications! 🚀

Usage

useAutoReadOtp

Automatically detect and read OTPs in your React components.

import { useAutoReadOtp } from 'react-usehooks-ts';

const ExampleComponent: React.FC = () => {
  const [detectedOTP, isOtpDetecting, otpDetectError] = useAutoReadOtp({
    startOtpDetection: true,
    timeoutInMin: 5,
  });

  // Your component code here

  return (
    <div>
      {isOtpDetecting ? (
        <p>Detecting OTP...</p>
      ) : (
        <p>Detected OTP: {detectedOTP}</p>
      )}
      {otpDetectError && <p>Error: {otpDetectError}</p>}
    </div>
  );
};

useDetectIncognito

Detect whether the user's browser is in incognito mode.

import React from 'react';
import { useDetectIncognito } from 'react-usehooks-ts';

const App = () => {
  const [isIncognito, isDetectingIncognito] = useDetectIncognito();

  return (
    <div>
      <h1>Incognito Mode Detection</h1>
      {isDetectingIncognito ? (
        <p>Detecting incognito mode...</p>
      ) : (
        <>
          <p>Is user in incognito mode: {isIncognito ? 'Yes' : 'No'}</p>
          <p>Incognito detection complete!</p>
        </>
      )}
    </div>
  );
};

export default App;

useDebounce

Debounce user input to enhance search functionality.

import React, { useState } from 'react';
import { useDebounce } from 'react-usehooks-ts';

const App = () => {
  const [inputValue, setInputValue] = useState('');
  const debouncedValue = useDebounce(inputValue);

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={inputValue}
        onChange={handleInputChange}
      />
      {debouncedValue && <p>Debounced Value: {debouncedValue}</p>}
    </div>
  );
};

export default App;

useMediaSession

Seamlessly integrate the Media Session API into your React app. Control playback, skip tracks, and handle media interactions effortlessly

import React from "react";
import { useMediaSession } from 'react-usehooks-ts';

const  PlaybackState="playing"

const MyAudioPlayer = () => {
  // Define your media information
  const mediaInfo = {
    title: "My Song",
    artist: "My Artist",
    artwork: [
      {
        src: "image.jpg",
        sizes: "96x96",
        type: "image/jpeg",
      },
    ],
  };

  // Callbacks for media control actions
  const handlePlay = () => {
    // Implement play functionality
  };

  const handlePause = () => {
    // Implement pause functionality
  };

  const handleNextTrack = () => {
    // Implement next track functionality
  };

  const handlePreviousTrack = () => {
    // Implement previous track functionality
  };

  const handleSeekForward = () => {
    // Implement seek forward functionality
  };

  const handleSeekBackward = () => {
    // Implement seek backward functionality
  };

  const handleSeekTo = () => {
    // Implement seek to functionality
  };

  const handleSkipAd = () => {
    // Implement skip ad functionality
  };

  const handleStop = () => {
    // Implement stop functionality
  };

  // Use the custom hook to set up media session
  useMediaSession({
    playbackState: PlaybackState
    mediaInfo,
    onPlay: handlePlay,
    onPause: handlePause,
    onNextTrack: handleNextTrack,
    onPreviousTrack: handlePreviousTrack,
    onSeekForward: handleSeekForward,
    onSeekBackward: handleSeekBackward,
    onSeekTo: handleSeekTo,
    onSkipAd: handleSkipAd,
    onStop: handleStop,
  });

  return (
    // Your audio player JSX here
    <div>
      <h1>{mediaInfo.title}</h1>
      <p>{mediaInfo.artist}</p>
      {/* Your media player controls here */}
    </div>
  );
};

export default MyAudioPlayer;

useSwipe

The useSwipe custom hook is a utility for React applications that simplifies the detection of swipe gestures on a specified element. Swipe gestures are common in mobile and touch-enabled interfaces, and this hook facilitates their recognition and handling.

import { useSwipe } from 'react-usehooks-ts';

function MyComponent() {
  const [swipeDirection, swipeRef] = useSwipe();

  const handleSwipe = () => {
    if (swipeDirection === 'left') {
      // Handle left swipe
    } else if (swipeDirection === 'right') {
      // Handle right swipe
    }
  };

  return (
    <div ref={swipeRef}>
      {/* Your content goes here */}
      <button onClick={handleSwipe}>Handle Swipe</button>
    </div>
  );
}

useInnerHeight

A React custom hook that provides real-time access to the browser window's inner height, allowing you to create responsive UI components that adapt to changes in vertical space.

import { useInnerHeight } from 'react-usehooks-ts';


function MyComponent() {
  const innerHeight = useInnerHeight();

  const contentStyle = {
    minHeight: innerHeight ? `${innerHeight}px` : '100vh',
  };

  return (
    <div style={contentStyle}>
      <p>Responsive Content</p>
      {/* Your content goes here */}
    </div>
  );
}

useKeyPress

A React custom hook that simplifies tracking whether a specific key is currently pressed. It provides a boolean value indicating the key's state (pressed or not) and handles event listeners for keyboard input.

import React from 'react';
import { useKeyPress } from 'react-usehooks-ts';

function MyComponent() {
  const isSpaceKeyPressed = useKeyPress('Space');

  const handleSpacePress = () => {
    if (isSpaceKeyPressed) {
      // Handle spacebar press
      console.log('Space bar is pressed!');
    }
  };

  return (
    <div>
      <p>Press the Space bar to see the result:</p>
      <button onClick={handleSpacePress}>
        Check Space bar
      </button>
    </div>
  );
}

export default MyComponent;

useListenPaste

The useListenPaste custom hook for React simplifies the process of listening for and extracting clipboard content when a paste event occurs. It specifically tracks pasted text with a specified length, providing a way to respond to clipboard actions within your application.

import React, { useEffect } from 'react';
import { useListenPaste } from 'react-usehooks-ts';


function MyComponent() {
  const textLength = 5; // Define the expected length of the pasted text
  const clipboardText = useListenPaste(textLength);

  // Define a callback function to handle the clipboard text
  useEffect(() => {
    if (clipboardText) {
      // Do something with the clipboardText
      console.log('Pasted text:', clipboardText);
    }
  }, [clipboardText]);

  return (
    <div>
      <p>Paste text of length {textLength} here:</p>
      <textarea placeholder="Paste here" />
    </div>
  );
}

export default MyComponent;

useMediaQuery

The useMediaQuery custom hook for React provides a straightforward way to determine whether a specified media query condition, such as screen width, is met. It allows you to react to changes in media query status, making it useful for building responsive user interfaces.

import React from 'react';
import { useMediaQuery} from 'react-usehooks-ts';

function MyComponent() {
  const maxWidth = 768; // Define the maximum width for your media query
  const isMobile = useMediaQuery(maxWidth);

  return (
    <div>
      <p>
        {isMobile
          ? 'This content is displayed on a mobile device.'
          : 'This content is displayed on a larger screen.'}
      </p>
      {/* Your content goes here */}
    </div>
  );
}

export default MyComponent;

useOutsideClickHook

The useOutsideClickHook custom hook for React simplifies the implementation of functionality that detects clicks outside a specified element. It is useful for scenarios like closing a dropdown or modal when a user clicks outside of it.

import React, { useRef } from 'react';
import { useOutsideClickHook } from 'react-usehooks-ts';


function MyComponent() {
  const dropdownRef = useRef(null);
  const isDropdownOpen = useOutsideClickHook(() => {
    // This callback function will be executed when a click occurs outside the dropdown.
    // You can use it to close the dropdown or perform any desired action.
    console.log('Clicked outside the dropdown!');
  }, dropdownRef);

  return (
    <div>
      <button onClick={() => isDropdownOpen()}>Toggle Dropdown</button>
      {isDropdownOpen() && (
        <div ref={dropdownRef} className="dropdown">
          {/* Dropdown content */}
          <p>Dropdown content here</p>
        </div>
      )}
    </div>
  );
}

export default MyComponent;

Package Sidebar

Install

npm i react-usehooks-ts

Weekly Downloads

5

Version

1.0.13

License

ISC

Unpacked Size

29.3 kB

Total Files

26

Last publish

Collaborators

  • dhananjaysr26