https://github.com/davidhdev/react-haiku
A clean & lightweight collection of React Hooks & Utilities!
https://github.com/davidhdev/react-haiku
components frontend hook hooks next nextjs react react-hooks reactjs utilities
Last synced: 3 months ago
JSON representation
A clean & lightweight collection of React Hooks & Utilities!
- Host: GitHub
- URL: https://github.com/davidhdev/react-haiku
- Owner: DavidHDev
- License: other
- Created: 2022-05-20T16:42:19.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-17T08:02:55.000Z (3 months ago)
- Last Synced: 2025-01-17T19:19:11.538Z (3 months ago)
- Topics: components, frontend, hook, hooks, next, nextjs, react, react-hooks, reactjs, utilities
- Language: TypeScript
- Homepage: https://reacthaiku.dev/
- Size: 804 KB
- Stars: 330
- Watchers: 6
- Forks: 61
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.MD
- License: LICENSE.md
Awesome Lists containing this project
README
# React Haiku
A clean & lightweight collection of React Hooks & Utilities!
[](https://github.com/DavidHDev/react-haiku/blob/main/LICENSE.md)
[](https://www.npmjs.com/package/react-haiku)
[](https://www.npmjs.com/package/react-haiku)
## Links
- [Official Docs](https://reacthaiku.dev/)
## What is this?
Haiku is a simple & lightweight React library with the goal of saving
you time by offering a large collection of hooks & utilities that will
help you get the job done faster & more efficiently!
## Install
Installing Haiku is very easy!
_Requires React >=16.8.0_
#### NPM
```sh
npm install react-haiku
```
#### Yarn
```sh
yarn add react-haiku
```
#### PNPM
```sh
pnpm install react-haiku
```
#### Unit Testing with Jest and React Testing Library
This project uses [jest](https://jestjs.io/) as the testing framework and [React Testing Library (RTL)](https://testing-library.com/docs/react-testing-library/intro) for testing React components and hooks.
#### Running Tests
To execute all unit tests with coverage enabled
```sh
npm run test
```
## Usage Examples
Please check the official [Documentation](https://reacthaiku.dev/) for full usage examples.
### Using Hooks
```jsx
import { useHover } from 'react-haiku';
const Component = () => {
const { hovered, ref } = useHover();
return
{hovered ? 'All mice on me' : 'No mice on me'}
;
};
export default Component;
```
### Using Utilities
```jsx
import { For } from 'react-haiku';
const Component = () => {
const list = [{ name: 'React' }, { name: 'Haiku' }];
render(
<>
{item.name}
} />
>,
);
};
export default Component;
```
## Contributing
Haiku is always open to improvements and contributions, you can check the [Open Issues](https://github.com/DavidHDev/react-haiku/issues) if you want to contribute, and it's also possible to request to add your own improvements/ideas using the [Feature Request](https://github.com/DavidHDev/react-haiku/issues/new/choose) template. Before contributing, please read the [Contribution Guide](https://github.com/DavidHDev/react-haiku/blob/main/CONTRIBUTING.MD) and make sure to respect the standards! Thank you for your time!
## PACKAGE CONTENTS
### Hooks
- [`useClipboard()`](https://reacthaiku.dev/docs/hooks/useClipboard) - Copy data to the user's clipboard!
- [`useHover()`](https://reacthaiku.dev/docs/hooks/useHover) - Quick way to detect if your mouse is over an element!
- [`useInputValue()`](https://reacthaiku.dev/docs/hooks/useInputValue) - Manage input state with this simple hook!
- [`useLeaveDetection()`](https://reacthaiku.dev/docs/hooks/useLeaveDetection) - Detect when your user's cursor leaves the page!
- [`useMediaQuery()`](https://reacthaiku.dev/docs/hooks/useMediaQuery) - Manipulate your component using media queries!
- [`useMousePosition()`](https://reacthaiku.dev/docs/hooks/useMousePosition) - Detect the current position of the mouse relative to a target or the whole document!
- [`usePrefersTheme()`](https://reacthaiku.dev/docs/hooks/usePrefersTheme) - Detect the user's preferred system theme!
- [`useScript()`](https://reacthaiku.dev/docs/hooks/useScript) - Attach script tags to the document from your components!
- [`useToggle()`](https://reacthaiku.dev/docs/hooks/useToggle) - Toggle state values between two different options!
- [`useBoolToggle()`](https://reacthaiku.dev/docs/hooks/useToggle) - Toggle boolean state values!
- [`useUrgentUpdate()`](https://reacthaiku.dev/docs/hooks/useUrgentUpdate) - Force render a component when calling this hook!
- [`useClickOutside()`](https://reacthaiku.dev/docs/hooks/useClickOutside) - Detect clicks outside a target element!
- [`useConfirmExit()`](https://reacthaiku.dev/docs/hooks/useConfirmExit) - Prompt the user with a message before closing the tab if the state is set as dirty.
- [`useDebounce()`](https://reacthaiku.dev/docs/hooks/useDebounce) - Debounce state changes to react to updates after a delay!
- [`useEventListener()`](https://reacthaiku.dev/docs/hooks/useEventListener) - Set event listeners on the window object or a specific target element!
- [`useFavicon()`](https://reacthaiku.dev/docs/hooks/useFavicon) - Dynamically update the website's favicon from a component!
- [`useFirstRender()`](https://reacthaiku.dev/docs/hooks/useFirstRender) - Check whether or not a component is on its first render!
- [`useHold()`](https://reacthaiku.dev/docs/hooks/useHold) - Handle long presses on a target element and execute a handler after a set delay!
- [`useIdle()`](https://reacthaiku.dev/docs/hooks/useIdle) - Detect user activity/inactivity on the page based on events!
- [`useIsomorphicLayoutEffect()`](https://reacthaiku.dev/docs/hooks/useIsomorphicLayoutEffect) - Switch between useEffect and useLayoutEffect depending on the execution environment (SSR VS Browser)!
- [`useLocalStorage()`](https://reacthaiku.dev/docs/hooks/useLocalStorage) - Manage localStorage values dynamically
- [`useScrollPosition()`](https://reacthaiku.dev/docs/hooks/useScrollPosition) - Access the current scroll position on the page and modify it programatically.
- [`useSingleEffect()`](https://reacthaiku.dev/docs/hooks/useSingleEffect) - Run the useEffect hook strictly only once when the component is mounted!
- [`useTitle()`](https://reacthaiku.dev/docs/hooks/useTitle) - Update the document's title from your components!
- [`useUpdateEffect()`](https://reacthaiku.dev/docs/hooks/useUpdateEffect) - Similar to useEffect, but it skips the first render of a component, and only react to updates triggered by dependency values.
### Utilities
- [`If`](https://reacthaiku.dev/docs/utilities/if) - Component for simple conditional rendering!
- [`Show`](https://reacthaiku.dev/docs/utilities/show) - Component for complex conditional rendering!
- [`For`](https://reacthaiku.dev/docs/utilities/for) - Dynamic rendering component with automatic key assignment!
- [`RenderAfter`](https://reacthaiku.dev/docs/utilities/renderAfter) - Component that renders its children after a set delay.
- [`Image`](https://reacthaiku.dev/docs/utilities/image) - Component that simplifies the process of rendering images.
## Maintainers
[David Haz](https://github.com/DavidHDev)
## License
MIT