r-custom-hooks

React Custom Hooks

This package contains predefined ready to use custom React hooks

Quick Start

To use the React Custom Hooks in your React project, you can install it using npm or yarn:

npm install r-custom-hooks
# or
yarn add r-custom-hooks

HOOKS & Usage Examples

useCookie

This hook is for managing cookies in your application.

import {useCookie} from "r-custom-hooks"

export default function CookieComponent() {
    const [cookie, updateCookie, removeCookie] = useCookie("name", "John Doe")

    return (
        <>
            <div>{cookie}</div>
            <button onClick={() => updateCookie("Jane Doe")}>Change Name To Jane Doe</button>
            <button onClick={removeCookie}>Delete Name</button>
        </>
    )
}

useDebounce

This is a hook for debouncing values in your application.

import React, { useState } from 'react';
import {useDebounce} from 'r-custom-hooks';

function MyComponent() {
  const [inputValue, setInputValue] = useState('');
  const debouncedValue = useDebounce(inputValue, 500);

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

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

export default MyComponent;

useEventListener

This is a hook for adding event listeners to elements or the window.

import React, { useRef } from 'react';
import {useEventListener} from 'r-custom-hooks';
import { EventType } from './types';

function MyComponent() {
  const myElementRef = useRef(null);

  const handleEvent = (event) => {
    // Your event handling logic here
    console.log('Event occurred:', event);
  };

  // Attach the event listener to the element
  useEventListener(EventType.CLICK, handleEvent, myElementRef);

  return (
    <div>
      <button ref={myElementRef}>Click me</button>
    </div>
  );
}

export default MyComponent;

useHistoricalState

This hook is for managing historical states with the ability to undo, redo, and navigate to specific states.

import React from 'react';
import {useHistoricalState} from 'r-custom-hooks';

function MyComponent() {
  const [count, setCount, history] = useHistoricalState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };

  const handleUndo = () => {
    history.previous(); // Go back to the previous state
  };

  const handleRedo = () => {
    history.next(); // Go forward to the next state (if available)
  };

  const handleGoTo = (index) => {
    history.go(index); // Go to a specific state in the history
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
      <button onClick={handleUndo}>Undo</button>
      <button onClick={handleRedo}>Redo</button>
      <button onClick={() => handleGoTo(0)}>Go to Initial State</button>
    </div>
  );
}

export default MyComponent;

useOutsideClick

This is a hook for detecting clicks outside a specified element

import React, { useRef, useState } from 'react';
import {useOutsideClick} from 'r-custom-hooks';

function MyComponent() {
  const containerRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  // Define a callback function to close the element when clicked outside
  const closeElement = () => {
    setIsOpen(false);
  };

  // Attach the useOutsideClick hook to the container element and the closeElement callback
  useOutsideClick(containerRef, closeElement);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Element</button>
      {isOpen && (
        <div ref={containerRef} className="element-to-close">
          <!-- Your element content here -->
        </div>
      )}
    </div>
  );
}

export default MyComponent;

useUnmount

This hook is for executing a callback when a component unmounts.

import React from 'react';
import {useUnmount} from 'r-custom-hooks';

function MyComponent() {
  // Define a cleanup function to run when the component unmounts
  const cleanup = () => {
    console.log('Component unmounted');
    // Perform any necessary cleanup here
  };

  // Attach the useUnmount hook with the cleanup function
  useUnmount(cleanup);

  // Your component logic here

  return (
    <div>
      <p>This is my component.</p>
    </div>
  );
}

export default MyComponent;

useMediaQuery

This hook is for handling media queries in your application.

import React from 'react';
import { useMediaQuery } from 'r-custom-hooks';

function MyComponent() {
  const isMobile = useMediaQuery('(max-width: 600px)');

  return (
    <div>
      <p>{isMobile ? 'Mobile View' : 'Desktop View'}</p>
    </div>
  );
}

export default MyComponent;