Skip to content

sahilmandoliya/custom_react_hooks

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Custom created React Hooks!

useCopyToClipboard()

This hook provides a simple way to copy content to the clipboard. It typically returns a function that, when invoked, copies a specified text to the clipboard.

usePageBottom()

The usePageBottom hook monitors the user's scroll position and triggers a callback when the bottom of the page is reached. This is useful for implementing infinite scrolling or loading more content as the user scrolls.

useHttp()

The useHttp hook is designed to simplify HTTP requests in React components. It may encapsulate the logic for making asynchronous requests to a server, handling loading states, and managing errors.

useDeviceDetect()

This hook provides information about the user's device, such as whether they are on a mobile device or desktop. It can be useful for conditionally rendering components or styles based on the user's device.

useMediaQuery()

The useMediaQuery hook allows you to conditionally render components based on a specified media query. It returns a boolean indicating whether the current screen matches the provided query.

userFetch()

The useFetch hook simplifies data fetching in React components. It handles the asynchronous nature of fetching data from an API and provides the fetched data, loading state, and potential errors.

useClickOutside()

This hook detects clicks outside a specified element. It's useful for scenarios where you want to close a dropdown, modal, or other UI element when the user clicks outside of it.

useLocalStorage()

The useLocalStorage hook syncs a state variable with the local storage, allowing for persistent storage of data between page reloads. It is helpful for managing simple client-side data storage.

useGeolocation()

The useGeolocation hook provides the user's current geolocation information, including latitude and longitude. It's useful for applications that require location-based functionality.

useDebounce()

The useDebounce hook delays the update of a value until a specified time has passed without further changes. This is helpful for scenarios like search input fields, where you want to avoid making requests on every keystroke.

useOnScreen()

This hook detects whether a specified element is currently in the user's viewport. It's often used for triggering animations or loading content when an element becomes visible.

useIdle()

The useIdle hook tracks whether the user is actively interacting with the application. It can be used to implement idle timeouts or trigger certain actions when the user becomes inactive.

useDeviceOrientation()

This hook provides information about the device's orientation, including tilt and rotation. It's useful for creating responsive layouts or interactive experiences based on device orientation.

useKeyPress()

A hook that tracks when a certain key or combination of keys is pressed.

useAudioPlayer()

This hook provides an interface for controlling audio playback, including features like play, pause, volume control, and track navigation.

useThrottle()

Similar to debounce, but instead of delaying the execution of a function, it limits the rate at which the function is called.

About

Populating custom react hooks here

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published