Useful: a React hooks library

Useful is designed to simplify and expedite your React application development. It takes care of utility side tasks, allowing you to concentrate on your application's own unique requirements. Here, you'll find comprehensive guidance on how to utilize and integrate Useful's hooks into your React applications.

⚠️

Useful is currently in Alpha and is not recommended for production environments. In the meantime, you can help us reach our first stable release by contributing (opens in a new tab).

Getting Started

First, install useful from NPM by running the following in your terminal:

npm i @ridgehkr/useful

After the installation is complete, you can import the hooks into your React components. For example, this is how you would import the useFetch hook:

import { useFetch } from '@ridgehkr/useful'

For a complete list of all available hooks, see the list below.

Hooks Index

UI

useDarkMode
Monitor and manage your application's dark mode.
useElementSize
Track the width and height of a given element.
useSlideshow
Manage the state of a slideshow component.
useTabs
Manage the state of a tabbed interface.

Environment

useClipboard
Copy and paste content to and from the clipboard.
useCustomCSSProp
Track the current value of a CSS custom prop.
useBatteryStatus
Monitory the level and charging state of the user's device battery.
useDeviceOrientation
Provide access to device orientation data such as tilt and rotation.
useGeolocation
Get the current geolocation of the user's device.
useHover
Track the hover state of a given element.
useIdleTimeout
Track user activity and trigger actions when the user becomes idle for a specified period.
useIntersectionObserver
Utilize IntersectionObserver (opens in a new tab) to track the scrolled visibility of a given component.
useLocalStorage
Manage state of local storage.
useMediaQuery
Monitor the state of custom media queries.
useMousePosition
Track the current X and Y coordinates of the mouse.
useOnlineStatus
Monitor the connected state of the user.
useScrollPosition
Track and change the window scroll position.
useSessionStorage
Manage data persistence in the browser's local storage.
useWindowSize
Monitor the window size and respond to changes.

Utilities

useAsync
Manage the execution state of an asyncronous function.
useDebounce
Debounce the updating of a value to limit rapid-firing events.
useFetch
Fetch data from a given URL and manage loading and error states.
useList
Manage a List data structure.
usePagination
Manage pagination state.
useRandomString
Generates a random string based off of specified criteria.
useStack
Manage a stack data structure.
useThrottle
Throttle the updating of a value to limit rapid-firing events.
useTimedCounter
Manage a counter that increments at a specified timed interval.
useUndoRedo
Manage undo and redo functionality for user actions, providing a history of changes that can be navigated

Roadmap

Useful is a new project and still has room for growth! We plan to add more hooks, unit tests, and continually improve documentation.

Proposed Future Additions

Have a suggestion for a hook that you'd like to see added to Useful? Open an issue (opens in a new tab) and let us know!

Though these lists are by no means in their final state, these are the current plans for the future of Useful:

Hooks

useModal: manage display state and possibly other properties of a modal
usePagination: manage pagination state
useClipboard: copy and paste content to and from the clipboard

Unit Tests

Contributing

Useful thrives on contributions from developers like you! If you encounter issues or have any suggestions for improvements, please feel free to contribute by opening an issue or submitting a pull request in the GitHub repository (opens in a new tab).

License

This project is licensed under the MIT License (opens in a new tab).

Created by Caleb Pierce (opens in a new tab).

useAsync