Custom React Hooks Collection

A collection of useful custom React hooks to simplify state management, UI interactions, and API calls.

Installation

You can install this package using npm or yarn:

npm install custom-react-hooks

or

yarn add custom-react-hooks

Usage

Import the hooks you need into your React components:

import {
  useClipboard,
  useDarkMode,
  useDebounce,
  useFetch,
} from "custom-react-hooks";

Available Hooks

1. useClipboard

Copy text to clipboard.

const { copyToClipboard } = useClipboard();
<button onClick={() => copyToClipboard("Copied text!")}>Copy</button>;

2. useDarkMode

Toggle dark mode state.

const [isDarkMode, toggleDarkMode] = useDarkMode();
<button onClick={toggleDarkMode}>Toggle Dark Mode</button>;

3. useDebounce

Debounce a value with a delay.

const debouncedValue = useDebounce(searchTerm, 500);

4. useDocumentTitle

Set the document title dynamically.

useDocumentTitle("My Custom Title");

5. useFetch

Fetch data from an API.

const { data, loading, error } = useFetch(
  "https://jsonplaceholder.typicode.com/users"
);

6. useGeolocation

Get the user's current location.

const { latitude, longitude } = useGeolocation();

7. useKeyPress

Detect when a key is pressed.

const isEnterPressed = useKeyPress("Enter");

8. useLocalStorage

Store and retrieve values from localStorage.

const [name, setName] = useLocalStorage("name", "");

9. useMediaQuery

Detect screen size changes.

const isMobile = useMediaQuery("(max-width: 768px)");

10. useSessionStorage

Store values in sessionStorage.

const [email, setEmail] = useSessionStorage("email", "");

11. useTimeout

Execute a function after a delay.

const { start, clear } = useTimeout(() => console.log("Timeout!"), 5000);

12. useToggle

Toggle a boolean state.

const [isOpen, toggle] = useToggle();

13. useWindowSize

Get window width and height.

const { width, height } = useWindowSize();

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

License

MIT