https://github.com/kobir1989/react-custom-hooks-kit
React Custom Hooks with TypeScript offers essential, type-safe hooks crafted for smoother React development.
https://github.com/kobir1989/react-custom-hooks-kit
custom-hooks hooks intersection-observer npm-package react-hooks use-media-query useclickaway-hook usefetch-hook useform-hook usescroll-hook usetoggle-hook usewindowsize-hook
Last synced: about 2 months ago
JSON representation
React Custom Hooks with TypeScript offers essential, type-safe hooks crafted for smoother React development.
- Host: GitHub
- URL: https://github.com/kobir1989/react-custom-hooks-kit
- Owner: kobir1989
- License: mit
- Created: 2023-12-26T13:39:00.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-01-01T12:53:27.000Z (over 1 year ago)
- Last Synced: 2025-04-17T05:05:55.107Z (about 2 months ago)
- Topics: custom-hooks, hooks, intersection-observer, npm-package, react-hooks, use-media-query, useclickaway-hook, usefetch-hook, useform-hook, usescroll-hook, usetoggle-hook, usewindowsize-hook
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-custom-hooks-kit
- Size: 176 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-custom-hooks-kit
### Modern, type-safe React hooks library. Simplify your development with reusable hooks designed to enhance productivity. Explore the documentation for easy-to-use guides and examples.
## Installation and Usage
### Install:
#### npm
```shell
npm install react-custom-hooks-kit
```
#### Yarn
```shell
yarn add react-custom-hooks-kit
```
### Table of Contents
| No. | Hooks |
| --- | ------------------------------------------------------- |
| | |
| 1 | **[useFetch](#usefetch)** |
| 2 | **[useLocalStorage](#useLocalStorage)** |
| 3 | **[useToggle](#useToggle)** |
| 4 | **[useForm](#useForm)** |
| 5 | **[useScroll](#useScroll)** |
| 6 | **[useMediaQuery](#useMediaQuery)** |
| 7 | **[useMousePosition](#useMousePosition)** |
| 8 | **[useWindowSize](#useWindowSize)** |
| 9 | **[useClickAway](#useClickAway)** |
| 10 | **[useCountDown](#useCountDown)** |
| 11 | **[useIntersectionObserver](#useIntersectionObserver)** |
1. ## useFetch
`useFetch` custom React hook designed to efficiently fetch and cache data based on a provided URL. It manages state for loading, error handling, and data retrieval, ensuring a seamless data-fetching experience.
### PARAMETERS
| Name | Type | Description |
| ---- | ------ | ----------------------------------------- |
| url | string | The URL from which data is to be fetched. |
### RETURNS
| Name | Type | Description |
| --------- | ------- | ------------------------------------------------------------- |
| data | T[] | The response data fetched from the provided URL. |
| error | object | Represents any error encountered during data fetching. |
| isLoading | boolean | Loading State |
| isError | boolean | Indicates whether an error occurred during the data fetching. |
### Example Code:
```javascript
import { useFetch } from 'react-custom-hooks-kit'
const Component = () => {
const { data, isLoading, error, isError } = useFetch(
'https://api.example.com/data'
)
if (isLoading) {
return
Loading...
}
if (isError) {
return
Error occurred: {error?.message}
}
return (
{data.map((item, index) => (
{item}
))}
)
}
```
2. ## useLocalStorage
`useLocalStorage` custom React hook that facilitates storing, retrieving, and synchronizing data with the browser's localStorage API.
### PARAMETERS
| Name | Type | Description |
| ------------ | ------ | ------------------------------------------------------------- |
| key | string | The key under which the value will be stored in localStorage. |
| initialValue | T | The initial value to be stored in localStorage. |
### RETURNS
| Name | Type | Description |
| ------------- | -------- | ---------------------------------------------------------------- |
| savedValue | T | The current state of the value stored in local storage. |
| setSavedValue | function | A function to set the state of the stored value in localStorage. |
### Example Code:
```javascript
import { useLocalStorage } from 'react-custom-hooks-kit'
const Component = () => {
const [savedValue, setSavedValue] = useLocalStorage('myKey', 'defaultValue')
const handleInputChange = e => {
setSavedValue(e.target.value)
}
return (
)
}
```
3. ## useToggle
`useToggle` custom React hook usefull for managing boolean state toggling. This hook simplifies the process of toggling between true and false values by providing an easy-to-use interface with a state value and a function for toggling the state.
### PARAMETERS
| Name | Type | Description |
| ------------ | ------- | ------------------------------------------------------------------------------------------------------------- |
| initialValue | boolean | Default value set to false. Change this parameter to the desired boolean value if different from the default. |
### RETURNS
| Name | Type | Description |
| -------- | -------- | ---------------------------------- |
| isOn | boolean | Current state |
| onToggle | function | Function to toggle between states. |
### Example Code:
```javascript
import { useToggle } from 'react-custom-hooks-kit'
const ToggleButton = () => {
const [isOn, toggle] = useToggle(false)
return (
{isOn ? 'ON' : 'OFF'}
Toggle state: {isOn ? 'ON' : 'OFF'}
)
}
```
4. ### useForm
`useForm` custom React hook usefull for effortlessly managing form state, handling input changes, and form submissions. This hook provides handlers for `onChange` and `onSubmit` events, enabling seamless form interactions. It includes features for input validation and error handling.
### PARAMETERS
| Name | Type | Description |
| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------- |
| initialInputValue | object | initial state. |
| submitCallback | function | Callback function that receives the form input value for further processing or backend interaction. |
| inputValidator | validator function | Callback function to validate each input field and return an object containing validation error messages. |
### RETURNS
| Name | Type | Description |
| --------------- | -------- | --------------------------------------------------------------------------------------------------------- |
| onChangeHandler | function | Function to handle input changes within the form. |
| onSubmitHandler | function | Function to handle form submissions. |
| formInputs | object | Object containing form input values that correspond to their respective field names. |
| errors | object | Object containing validation error messages corresponding to the fields validated through inputValidator. |
### Example Code:
```javascript
import { useForm } from 'react-custom-hooks-kit'
const initialState = {
email: '',
password: ''
}
const validator = inputValue => {
const error = {}
if (inputValue.password && inputValue.password.length < 6) {
error.password = 'Password should be more than 6 characters.'
}
// ... add other validations
return error
}
const Form = () => {
const sendFormData = inputValue => {
console.log(inputValue)
// ... process data further
}
const { onChangeHandler, onSubmitHandler, formInputs, errors } = useForm(
initialState,
sendFormData,
validator
)
return (
Submit
)
}
```
5. ## useScroll
`useScroll` custom React hook usefull for track and manage the scroll position within application. `useScroll` monitors scroll events, providing real-time updates on the current scroll position. By utilizing useState and useEffect, it offers a simple and effective way to keep track of scrolling activities.
### RETURNS
| Name | Type | Description |
| --------------- | ------ | ----------------------- |
| currentPosition | number | Current scroll position |
### Example Code:
```javascript
import { useScroll } from 'react-custom-hooks-kit'
const Component = () => {
const { currentPosition } = useScroll()
return (
Current Scroll: {currentPosition}
)
}
```
6. ## useMediaQuery
`useMediaQuery` custom React hook that dynamically responds to changes in the viewport based on specified media queries. This hook efficiently tracks viewport adjustments, providing a boolean value to reflect whether the current viewport matches the provided query.
### PARAMETERS
| Name | Type | Description |
| ----- | ------ | -------------------------------------------------------------------------- |
| query | string | A string representing the media query to be tested. Ex: 'max-width: 768px' |
### RETURNS
| Name | Type | Description |
| ------- | ------- | ---------------------------------------------------------- |
| matches | boolean | Represents whether the current viewport matches the query. |
### Example Code:
```javascript
import { useMediaQuery } from 'react-custom-hooks-kit'
const Component = () => {
const isMobile = useMediaQuery('(max-width: 568px)')
const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)')
const isDesktop = useMediaQuery('(min-width: 1025px)')
return (
Is Mobile? {isMobile ? 'Yes' : 'No'}
Is Tablet? {isTablet ? 'Yes' : 'No'}
Is Desktop? {isDesktop ? 'Yes' : 'No'}
)
}
```
7. ## useMousePosition
`useMousePosition` custom React hook designed to provide real-time tracking of the mouse position within a specified HTML element. This hook returns the current mouse coordinates (x and y), allowing for dynamic interactions based on mouse movements.
### PARAMETERS
| Name | Type | Description |
| ---- | ----------------------------- | ------------------------------------- |
| ref | MutableRefObject | Reference to the target HTML element. |
### RETURNS
| Name | Type | Description |
| -------------------- | ---------------------------------------------- | ------------------------------------------------------------- |
| currentMousePosition | MousePosition object: { x: number, y: number } | Represents the current mouse coordinates (x and y positions). |
### Example Code:
```javascript
import { useMousePosition } from 'react-custom-hooks-kit'
import { useRef } from 'react'
const Component = () => {
const elementRef = useRef(null)
const mouse = useMousePosition(elementRef)
return (
X: {mouse.x}, Y: {mouse.y}
)
}
```
8. ## useWindowSize
`useWindowSize` custom React hook usefull for tracking and retrieving the dimensions of the browser window. This hook returns the current width and height of the window, enabling dynamic responsiveness to changes in the viewport size.
### RETURNS
| Name | Type | Description |
| ------ | ------ | ---------------------------------------------------- |
| width | number | Represents the current width of the browser window. |
| height | number | Represents the current height of the browser window. |
### Example Code:
```javascript
import { useWindowSize } from 'react-custom-hooks-kit'
const WindowSizeComponent = () => {
const { width, height } = useWindowSize()
return (
Window Width: {width}px
Window Height: {height}px
)
}
```
9. ## useClickAway
`useClickAway` custom React hook designed to detect clicks outside of a specified HTML element. This hook facilitates the monitoring of clicks beyond the targeted element, triggering a callback when such clicks occur. It provides functions to enable and disable click-away detection, allowing for dynamic control over the click detection behavior.
### PARAMETERS
| Name | Type | Description |
| ----------- | ---------------- | ------------------------------------------------------------------------- |
| ref | MutableRefObject | Reference to the target HTML element. |
| onClickAway | function | Callback function triggered when a click is detected outside the element. |
### RETURNS
| Name | Type | Description |
| ------- | -------- | --------------------------------- |
| enable | function | Enables the click-away listener. |
| disable | function | Disables the click-away listener. |
### Example Code:
```javascript
import { useClickAway } from 'react-custom-hooks-kit'
const Component = () => {
const clickRef = useRef(null)
const [isOpen, setIsOpen] = useState(false)
const handleClickAway = () => {
setIsOpen(false)
}
const { enable, disable } = useClickAway(clickRef, handleClickAway)
return (
setIsOpen(true)}>Open Modal
{isOpen && (
Enable
Disable
Modal
)}
)
}
```
10. ## useCountDown
`useCountDown` custom React hook designed to implement a countdown timer functionality. This hook initializes a countdown from a specified count value and updates the count at a defined delay interval. It returns the current count value.
### PARAMETERS
| Name | Type | Description |
| ----- | ------ | -------------------------------------------------- |
| count | number | The initial count value for the countdown. |
| delay | number | The delay (in milliseconds) between count updates. |
### RETURNS
| Name | Type | Description |
| ------------ | ------ | ---------------------------------------------------- |
| currentCount | number | Represents the current count value of the countdown. |
### Example Code:
```javascript
import { useCountDown } from 'react-custom-hooks-kit'
const Component = () => {
const countDown = useCountDown(10, 200) // Start countdown from 10 with a delay of 200 ms.
return (
Countdown: {countDown}
)
}
```
11. ## useIntersectionObserver
`useIntersectionObserver` custom Hook that determines if a component is visible on your screen. It relies on the IntersectionObserver API, which is already available in your browser. This hook comes in handy for tasks such as loading images when they come into view, creating endless scrolling on pages, or triggering animations.
### PARAMETERS
| Name | Type | Description |
| ----------------------- | ---------------------------- | --------------------------------------------------------------- |
| ref | MutableRefObject | Reference to the observed HTML element. |
| options | object | Intersection Observer configuration options. |
| options.threshold | number (\*default 0.3) | The ratio of intersection needed to trigger the callback. |
| options.root | HTMLElement (\*default null) | The element used as the viewport for checking intersection. |
| options.rootMargin | string (\*default "0%") | Margin around the root element to adjust the intersection area. |
| options.stopOnceVisible | boolean (\*default false) | Stops observing once the element becomes visible. |
### RETURNS
| Name | Type | Description |
| ----------------- | --------------------------------- | ------------------------------------------------------------ |
| intersectionEntry | IntersectionObserverEntry \| null | Represents the intersection details of the observed element. |
### Example Code:
```javascript
import { useIntersectionObserver } from react-custom-hooks-kit';
import React, { useRef } from 'react';
const IntersectionComponent = () => {
const targetRef = useRef(null);
const intersectionEntry = useIntersectionObserver(targetRef, {
threshold: 0.5,
root: null,
rootMargin: '0%',
stopOnceVisible: true
});
const isVisible = intersectionEntry?.isIntersecting;
return (
{isVisible ? 'Element visible!' : 'Scroll to see me!'}
);
};
const Component = () => {
return (
{Array.from({ length: 5 }).map((_, index) => (
))}
)
}
```
**[⬆ Back to Top](#table-of-contents)**