react-usehooks-ts

A collections of typescript supported React Custom Hooks


Table of Contents

- Installation
- Usage

Installation

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

``bash
npm install react-usehooks-ts
`

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

Usage

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

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

// Your component code here

return (


`

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

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

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

return (


`

useDebounce
>Debounce user input to enhance search functionality.

`bash
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 (


`

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

`bash
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



`


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.

`bash
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 (



`

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.

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


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

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

return (


`

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.

`bash
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 (


`


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.

`bash
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 (