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

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>
        </>
    )
}

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;

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;

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;

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;

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;

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;