react-pre-hooks
TypeScript icon, indicating that this package has built-in type declarations

2.1.1 • Public • Published

Logo

react-pre-hooks

Simplify and clean up your components with this react hooks collection.

npm Workflow Documentation Contribution License


List Of Hooks

useAnimationFrame

Handle the requestAnimationFrame method of the window object.

useArray

This hook returns an array with with some common and useful array methods making the code minimal and maintainable.

useAsync

This hook simplifies the execution of an async function by returning its states and results.

useAudioAnalyser

This hook uses and audio analyser to create and an audio visualizer from a media element (audio/video) or the user microphone.

useBeforeUnload

Stop the user before closing the window using this hook.

useBoolean

A hook that toggles between true and false.

useClickAway

Execute a function when the user clicks outside a target element.

useClient

A solution to fix the hydration error in Next.js.

useClipboard

Copy to the clipboard and return a temporary copied state.

useClock

This hook returns the current date time every second or a timeout value.

useContextMenu

Handle the user right clicks on a target element with this hook.

useCounter

Use a simple counter with min and max values, and some methods to minimalize the component.

useDebouncedState

This hook returns a state that Updates its value after a specific delay to handle fast updated values.

useDevice

Detect the device type with some boolean values.

useDragAndDrop

You can handle the user drag actions on a container element using this hook, and it can also handle the mobile touches.

useEasing

Change a value from a start to an end value using an animation timing function.

useEventListener

Add one or multiple event listeners to a specific target element, window, or document object, if you're using typescript you will get auto-completion for the event listeners.

useFetch

Fetch data with a URL and search parameters using useAsync hook.

useFileDropArea

Build a file drop area component easily with this hook, it handles file dropping to a label of a file input.

useFullscreen

Toggle the fullscreen mode on a target element using this hook.

useGeolocation

Track the current geolocation of the client using this hook.

useGridLayout

Track the number of rows and columns of a grid layout using this hook.

useHash

Track and update the window location hash value using this hook.

useHover

This hook returns whether the target element is hovered or not, and it can use a delay value as well for both hover and unhover events.

useImageLoader

Use this hook to load an image in the background using its URL, and returns its loading state.

useInView

This hook uses useIntersectionObserver hook and returns the intersecting state.

useIntersectionObserver

Handle the IntersectionObserver using this hook.

useInterval

This hook makes setInterval easy to use and control with some useful methods.

useIsomorphicEffect

This hook is a replacement for useEffect that works in both browser and server.

useKeyboard

Bind any keyboard keys or hotkeys with handlers in a very simple way.

useLocalStorage

Get and Set a specific value in the local storage.

useMap

This hook returns a map object with with its props and methods to make the code minimal and maintainable.

useMediaDevices

This hook uses the user media devices (camera and microphone) and returns their states and controls as well as their stream object.

useMediaQuery

Track the matchMedia changes of a media query using this hook.

useMediaRecorder

Generate a recorded (video/audio) from a media stream object using the media recorder with its state and controller methods.

useMousePosition

This hook tracks the mouse cursor position of a target element.

useMutationObserver

Handles the MutationObserver and tracks changes being made to the DOM tree.

useNetworkState

This hook can track the user connection changes and return whether is online or offline with some of the user network informations.

useOrientation

Track the screen orientation type using this hook.

usePageVisibility

Check if the tab contents is visible or hidden using this hook.

usePointerLock

Toggle the pointer lock mode on a target element using this hook.

usePointers

Handle all the pointer events at once using this hook.

usePreferredLanguage

Track the current user preferred language using this hook.

useResizeObserver

Handle the ResizeObserver using this hook.

useScreenCapture

This hook uses the user screen capture and returns its states and controls as well as the media stream object.

useScrollDirection

This hook detects the scroll direction of the window or a target element.

useScrollPosition

This hook tracks the scroll position and progress of a target element.

useScrollThreshold

Returns a boolean state that indicates if the user has passed a specified scroll threshold.

useSelection

This hook returns the current selected text on the window or a specific element, and other things.

useSessionStorage

Get and Set a specific value in the session storage.

useSet

This hook returns an set with with some common and useful set methods making the code minimal and maintainable.

useSize

Track the element size easily using useResizeObserver.

useSpeech

This hook uses a text speaker with available voices as well as its state and controller methods.

useStateHistory

This hook stores a specific number of the previous state values and uses a pointer to switch between them.

useStateStatus

This hook returns the state and its current status using a state handler.

useSwiping

You can handle the user swipe actions using this hook, and it can also handle the mouse swipes.

useTimeout

This hook makes setTimeout easy to use and control with some useful methods.

useTimer

You can create a timer or a countdown with many options using this hook.

useToggle

Toggles a state between an array of values.

useUnmount

Execute a callback function before the component is unmounted (leaves the DOM).

useViewport

Track the screen viewport (screen width and height).

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests.

Package Sidebar

Install

npm i react-pre-hooks

Weekly Downloads

116

Version

2.1.1

License

MIT

Unpacked Size

230 kB

Total Files

200

Last publish

Collaborators

  • malkiii