This package contains predefined ready to use custom React hooks
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
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;