Skip to content

React Custom Hooks with TypeScript offers essential, type-safe hooks crafted for smoother React development.

License

Notifications You must be signed in to change notification settings

kobir1989/react-custom-hooks-kit

Repository files navigation

react-custom-hooks-kit

npm version License Downloads GitHub stars GitHub forks GitHub issues GitHub pull requests Maintenance

Modern, type-safe React hooks library. Simplify your development with reusable hooks designed to enhance productivity. Explore the documentation for easy-to-use guides and examples.

Installation and Usage

Install:

npm

npm install react-custom-hooks-kit

Yarn

yarn add react-custom-hooks-kit

Table of Contents

No. Hooks
1 useFetch
2 useLocalStorage
3 useToggle
4 useForm
5 useScroll
6 useMediaQuery
7 useMousePosition
8 useWindowSize
9 useClickAway
10 useCountDown
11 useIntersectionObserver
  1. useFetch

useFetch custom React hook designed to efficiently fetch and cache data based on a provided URL. It manages state for loading, error handling, and data retrieval, ensuring a seamless data-fetching experience.

PARAMETERS

Name Type Description
url string The URL from which data is to be fetched.

RETURNS

Name Type Description
data T[] The response data fetched from the provided URL.
error object Represents any error encountered during data fetching.
isLoading boolean Loading State
isError boolean Indicates whether an error occurred during the data fetching.

Example Code:

import { useFetch } from 'react-custom-hooks-kit'

const Component = () => {
  const { data, isLoading, error, isError } = useFetch(
    'https://api.example.com/data'
  )

  if (isLoading) {
    return <div>Loading...</div>
  }

  if (isError) {
    return <div>Error occurred: {error?.message}</div>
  }

  return (
    <div>
      {data.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
    </div>
  )
}
  1. useLocalStorage

useLocalStorage custom React hook that facilitates storing, retrieving, and synchronizing data with the browser's localStorage API.

PARAMETERS

Name Type Description
key string The key under which the value will be stored in localStorage.
initialValue T The initial value to be stored in localStorage.

RETURNS

Name Type Description
savedValue T The current state of the value stored in local storage.
setSavedValue function A function to set the state of the stored value in localStorage.

Example Code:

import { useLocalStorage } from 'react-custom-hooks-kit'

const Component = () => {
  const [savedValue, setSavedValue] = useLocalStorage('myKey', 'defaultValue')

  const handleInputChange = e => {
    setSavedValue(e.target.value)
  }

  return (
    <div>
      <input type='text' value={savedValue} onChange={handleInputChange} />
    </div>
  )
}
  1. useToggle

`useToggle` custom React hook usefull for managing boolean state toggling. This hook simplifies the process of toggling between true and false values by providing an easy-to-use interface with a state value and a function for toggling the state.

PARAMETERS

Name Type Description
initialValue boolean Default value set to false. Change this parameter to the desired boolean value if different from the default.

RETURNS

Name Type Description
isOn boolean Current state
onToggle function Function to toggle between states.

Example Code:

import { useToggle } from 'react-custom-hooks-kit'

const ToggleButton = () => {
  const [isOn, toggle] = useToggle(false)

  return (
    <div>
      <button onClick={toggle}>{isOn ? 'ON' : 'OFF'}</button>
      <p>Toggle state: {isOn ? 'ON' : 'OFF'}</p>
    </div>
  )
}
  1. useForm

`useForm` custom React hook usefull for effortlessly managing form state, handling input changes, and form submissions. This hook provides handlers for `onChange` and `onSubmit` events, enabling seamless form interactions. It includes features for input validation and error handling.

PARAMETERS

Name Type Description
initialInputValue object initial state.
submitCallback function Callback function that receives the form input value for further processing or backend interaction.
inputValidator validator function Callback function to validate each input field and return an object containing validation error messages.

RETURNS

Name Type Description
onChangeHandler function Function to handle input changes within the form.
onSubmitHandler function Function to handle form submissions.
formInputs object Object containing form input values that correspond to their respective field names.
errors object Object containing validation error messages corresponding to the fields validated through inputValidator.

Example Code:

import { useForm } from 'react-custom-hooks-kit'

const initialState = {
  email: '',
  password: ''
}

const validator = inputValue => {
  const error = {}
  if (inputValue.password && inputValue.password.length < 6) {
    error.password = 'Password should be more than 6 characters.'
  }
  // ... add other validations
  return error
}

const Form = () => {
  const sendFormData = inputValue => {
    console.log(inputValue)
    // ... process data further
  }

  const { onChangeHandler, onSubmitHandler, formInputs, errors } = useForm(
    initialState,
    sendFormData,
    validator
  )

  return (
    <form onSubmit={onSubmitHandler}>
      <input
        value={formInputs.email}
        type='email'
        name='email'
        onChange={onChangeHandler}
      />
      <input
        value={formInputs.password}
        type='password'
        name='password'
        onChange={onChangeHandler}
      />
      <button type='submit'>Submit</button>
    </form>
  )
}
  1. useScroll

`useScroll` custom React hook usefull for track and manage the scroll position within application. `useScroll` monitors scroll events, providing real-time updates on the current scroll position. By utilizing useState and useEffect, it offers a simple and effective way to keep track of scrolling activities.

RETURNS

Name Type Description
currentPosition number Current scroll position

Example Code:

import { useScroll } from 'react-custom-hooks-kit'

const Component = () => {
  const { currentPosition } = useScroll()

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <h2 style={{ position: 'fixed', top: '0', left: '0' }}>
        Current Scroll: {currentPosition}
      </h2>
    </div>
  )
}
  1. useMediaQuery

`useMediaQuery` custom React hook that dynamically responds to changes in the viewport based on specified media queries. This hook efficiently tracks viewport adjustments, providing a boolean value to reflect whether the current viewport matches the provided query.

PARAMETERS

Name Type Description
query string A string representing the media query to be tested. Ex: 'max-width: 768px'

RETURNS

Name Type Description
matches boolean Represents whether the current viewport matches the query.

Example Code:

import { useMediaQuery } from 'react-custom-hooks-kit'

const Component = () => {
  const isMobile = useMediaQuery('(max-width: 568px)')
  const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)')
  const isDesktop = useMediaQuery('(min-width: 1025px)')

  return (
    <div>
      <p>Is Mobile? {isMobile ? 'Yes' : 'No'}</p>
      <p>Is Tablet? {isTablet ? 'Yes' : 'No'}</p>
      <p>Is Desktop? {isDesktop ? 'Yes' : 'No'}</p>
    </div>
  )
}
  1. useMousePosition

`useMousePosition` custom React hook designed to provide real-time tracking of the mouse position within a specified HTML element. This hook returns the current mouse coordinates (x and y), allowing for dynamic interactions based on mouse movements.

PARAMETERS

Name Type Description
ref MutableRefObject Reference to the target HTML element.

RETURNS

Name Type Description
currentMousePosition MousePosition object: { x: number, y: number } Represents the current mouse coordinates (x and y positions).

Example Code:

import { useMousePosition } from 'react-custom-hooks-kit'
import { useRef } from 'react'

const Component = () => {
  const elementRef = useRef(null)
  const mouse = useMousePosition(elementRef)

  return (
    <section
      ref={elementRef}
      style={{ width: '100%', height: '400px', backgroundColor: 'lightgray' }}
    >
      <p>
        X: {mouse.x}, Y: {mouse.y}
      </p>
    </section>
  )
}
  1. useWindowSize

`useWindowSize` custom React hook usefull for tracking and retrieving the dimensions of the browser window. This hook returns the current width and height of the window, enabling dynamic responsiveness to changes in the viewport size.

RETURNS

Name Type Description
width number Represents the current width of the browser window.
height number Represents the current height of the browser window.

Example Code:

import { useWindowSize } from 'react-custom-hooks-kit'

const WindowSizeComponent = () => {
  const { width, height } = useWindowSize()

  return (
    <div>
      <p>Window Width: {width}px</p>
      <p>Window Height: {height}px</p>
    </div>
  )
}
  1. useClickAway

`useClickAway` custom React hook designed to detect clicks outside of a specified HTML element. This hook facilitates the monitoring of clicks beyond the targeted element, triggering a callback when such clicks occur. It provides functions to enable and disable click-away detection, allowing for dynamic control over the click detection behavior.

PARAMETERS

Name Type Description
ref MutableRefObject Reference to the target HTML element.
onClickAway function Callback function triggered when a click is detected outside the element.

RETURNS

Name Type Description
enable function Enables the click-away listener.
disable function Disables the click-away listener.

Example Code:

import { useClickAway } from 'react-custom-hooks-kit'

const Component = () => {
  const clickRef = useRef(null)
  const [isOpen, setIsOpen] = useState(false)

  const handleClickAway = () => {
    setIsOpen(false)
  }
  const { enable, disable } = useClickAway(clickRef, handleClickAway)

  return (
    <section ref={clickRef}>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen && (
        <div>
          <div>
            <button onClick={enable}>Enable</button>
            <button onClick={disable}>Disable</button>
          </div>
          <h2>Modal</h2>
        </div>
      )}
    </section>
  )
}
  1. useCountDown

`useCountDown` custom React hook designed to implement a countdown timer functionality. This hook initializes a countdown from a specified count value and updates the count at a defined delay interval. It returns the current count value.

PARAMETERS

Name Type Description
count number The initial count value for the countdown.
delay number The delay (in milliseconds) between count updates.

RETURNS

Name Type Description
currentCount number Represents the current count value of the countdown.

Example Code:

import { useCountDown } from 'react-custom-hooks-kit'

const Component = () => {
  const countDown = useCountDown(10, 200) // Start countdown from 10 with a delay of 200 ms.

  return (
    <div>
      <p>Countdown: {countDown}</p>
    </div>
  )
}
  1. useIntersectionObserver

useIntersectionObserver custom Hook that determines if a component is visible on your screen. It relies on the IntersectionObserver API, which is already available in your browser. This hook comes in handy for tasks such as loading images when they come into view, creating endless scrolling on pages, or triggering animations.

PARAMETERS

Name Type Description
ref MutableRefObject Reference to the observed HTML element.
options object Intersection Observer configuration options.
options.threshold number (*default 0.3) The ratio of intersection needed to trigger the callback.
options.root HTMLElement (*default null) The element used as the viewport for checking intersection.
options.rootMargin string (*default "0%") Margin around the root element to adjust the intersection area.
options.stopOnceVisible boolean (*default false) Stops observing once the element becomes visible.

RETURNS

Name Type Description
intersectionEntry IntersectionObserverEntry | null Represents the intersection details of the observed element.

Example Code:

import { useIntersectionObserver } from react-custom-hooks-kit';
import React, { useRef } from 'react';

const IntersectionComponent = () => {
  const targetRef = useRef(null);
  const intersectionEntry = useIntersectionObserver(targetRef, {
    threshold: 0.5,
    root: null,
    rootMargin: '0%',
    stopOnceVisible: true
  });

  const isVisible = intersectionEntry?.isIntersecting;

  return (
    <div>
      <div
        ref={targetRef}
        style={{
          height: '200px',
          backgroundColor: isVisible ? 'yellow' : 'gray'
        }}
      >
        {isVisible ? 'Element visible!' : 'Scroll to see me!'}
      </div>
    </div>
  );
};


const Component = () => {
  return (
    <main>
      {Array.from({ length: 5 }).map((_, index) => (
        <IntersectionComponent key={index + 1} />
      ))}
    </main>
  )
}

⬆ Back to Top