React Hook Kit


React Hook Kit is a library of custom React hooks written in TypeScript. It includes common and useful hooks like useForm, useFetch, useLocalStorage, and others, simplifying and accelerating the development process.

Installation

``bash
npm install react-hook-kit
`

Available Hooks

useForm: A hook for handling form state and validation.

Usage

useForm

The useForm hook allows you to manage form state and handle form input changes easily. It takes an initial form state object as an argument and returns an object with the current form state, a function to handle input changes, and a function to reset the form.

Example usage:

`jsx
import React from "react";
import { useForm } from "react-hook-kit";

const MyForm = () => {
const { formState, handleChange, resetForm } = useForm({
name: "",
email: "",
});

const handleSubmit = (e) => {
e.preventDefault();
// Perform form submission logic
};

return (


export default MyForm;
`

In the example above, the useForm hook is used to manage the form state with two fields: name and email. The handleChange function updates the form state on input changes, and the resetForm function resets the form back to its initial state.

For more information and examples of other available hooks, please refer to the documentation.

Testing

This hook is fully tested with Jest and React Testing Library.

useLocalStorage

This hook makes it easy to read from and write to localStorage, with the added bonus of re-rendering your components whenever the stored value changes.

Usage

`jsx
import { useLocalStorage } from "react-hook-kit";

function MyComponent() {
const [value, setValue, removeValue, checkIfKeyExists] = useLocalStorage(
"myKey",
"defaultValue",
);

return (


`TypeScript

const { data, isLoading, error } = useFetch(url, options);

`

Parameters:

url - A string representing the URL of the resource you want to fetch.
options - An optional object of parameters for the fetch function.
Return Value:

An object with three properties:

data - The data fetched from the API. If the data hasn't loaded yet, this will be null.
isLoading - A boolean that indicates whether the data is currently loading.
error - If there was an error while fetching the data, this will be an Error object. Otherwise, it will be null.
Example:

Here is an example of how to use useFetch in a component to fetch data from a JSON API.

`tsx
import { useFetch } from "./useFetch";

function MyComponent() {
const { data, isLoading, error } = useFetch("https://api.example.com/data");

if (isLoading) {
return

{JSON.stringify(data, null, 2)}

useOnClickOutside is a custom React hook that triggers a callback function when a click event occurs outside of one or more specified elements. It's useful for scenarios like closing modals, dropdown menus, or popups when the user clicks anywhere else on the page.

Usage

Here is a simple usage example:

`jsx
import { useOnClickOutside } from 'react-hook-kit';

const TestComponent = ({ callback }: { callback: () => void }) => {
const ref = React.useRef(null);

useOnClickOutside([ref], callback);

return

usePrevious is a custom React hook that would be used to capture and return the previous value of a variable from the last render. This could be useful in a variety of scenarios where tracking previous state or prop values is necessary.

Usage

Here is a simple usage example:

`jsx
import { usePrevious } from "react-hook-kit";

const TestComponent = () => {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count);

useEffect(() => {
console.log("Current number:", count);
console.log("Previous number:", prevCount);
}, [count, prevCount]);

return (


useInterval is a custom React hook that should be implemented to allow the execution of a function at specified, regular intervals. This would be especially useful for features that require periodic updates, like countdown timers or auto-refresh features.

Usage

Here is a simple usage example:

`jsx
import { useInterval } from "react-hook-kit"; // Путь к вашему файлу с хуком

const CountdownTimer = () => {
const [count, setCount] = useState < number > 10;

useInterval(() => {
setCount((prevCount) => prevCount - 1);
}, 1000);

return

useTimeout is a custom React hook that would be used to delay the execution of a function by a specified amount of time. This could be useful for a variety of scenarios where a delay in function execution is necessary, like in the case of toast notifications or timed redirects.

Usage

Here is a simple usage example:

`jsx
import { useTimeout } from "react-hook-kit";

const DelayedFunction = () => {
const [showMessage, setShowMessage] = useState < boolean > false;

useTimeout(() => {
setShowMessage(true);
}, 2000);
g;

return

useDebounce is a custom React hook that will be used to limit the rate at which a function can fire. This is useful when we have a function that we need to execute, but we don’t want it to execute until after a certain amount of time has passed since it was last invoked.

Usage

Here is a simple usage example:

`jsx
import { useDebounce } from 'react-hook-kit';

const SearchInput = () => {
const [query, setQuery] = useState('');

const handleInputChange = (event: React.ChangeEvent) => {
setQuery(event.target.value);
};

useDebounce(() => {
console.log('Search:', query);
}, 500, [query]);

return ;
};
`

Contributing

Contributions are welcome! If you have any ideas, improvements, or bug fixes, please open an issue or submit a pull request.

License

This project is licensed under the MIT License.

Testing

This hook is fully tested with Jest and React Testing Library.

useThrottle Hook

Description

useThrottle is a custom React hook that will be used to ensure that a function cannot be called more than once every X milliseconds. This can be helpful in situations where we want to make sure that a certain function is not called too often, such as a resize or scroll event listener in a web application.

Usage

Here is a simple usage example:

`jsx
import useThrottle from "react-hook-kit";

const MyComponent = () => {
const handleResize = () => {
console.log("Window resized");
};

useThrottle(handleResize, 500);

return (


`jsx
import useWindowSize from "react-hook-kit";

function Component() {
const { width, height } = useWindowSize();
return (


`jsx
import React from "react";
import useMediaQuery from "[your-package-name]";

const ResponsiveComponent = () => {
// Using the hook to check if the viewport width is at least 768px.
const isWideViewport = useMediaQuery("(min-width: 768px)");

return (
<>
{isWideViewport ? (


The viewport is wide enough!

The useAsync hook simplifies working with asynchronous operations in React. It accepts an asynchronous function and an optional immediate flag (default is true). This hook manages the loading state, data, and errors from the asynchronous operation. It returns an object containing data, isLoading, and error states, along with an execute function to manually trigger the asynchronous operation.

Usage

Here is a simple usage example:

`jsx
import React from "react";
import { useAsync } from "react-hook-kit";

const fetchData = async () => {
const response = await fetch("https://example.com/data");
return await response.json();
};

const DataFetchingComponent = () => {
const { data, isLoading, error, execute } = useAsync(fetchData);

return (
<>
{isLoading &&

Loading...

useUpdateEffect is a custom React hook that mimics the behavior of useEffect but skips the effect on the initial component mount. It triggers the effect only on subsequent updates, making it ideal for scenarios where you want to avoid running effects after the first render.

Usage

Here's a simple example of using useUpdateEffect:

`jsx
import React, { useState } from "react";
import { useUpdateEffect } from "react-hook-kit";

const Component = () => {
const [count, setCount] = useState(0);

useUpdateEffect(() => {
console.log("Count updated:", count);
}, [count]);

return (


useHover is a custom React hook that enables detecting if the cursor is hovering over a specific component or element. It returns a ref to attach to the desired element and a boolean indicating whether that element is currently being hovered.

Usage

Here's a simple example:

`jsx
import React from "react";
import { useHover } from "react-hook-kit";

const HoverComponent = () => {
const [hoverRef, isHovered] = useHover();

return (


Contributing

Contributions are welcome! If you have any ideas, improvements, or bug fixes, please open an issue or submit a pull request.

License

This project is licensed under the MIT License.

Testing

This hook is fully tested with Jest and React Testing Library.