https://beautifulinteractions.github.io/beautiful-react-hooks

🔥 A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥
https://beautifulinteractions.github.io/beautiful-react-hooks

custom-hooks front-end hooks react react-components react-hooks

Last synced: 2 months ago
JSON representation

🔥 A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥

• Host: GitHub
• URL: https://beautifulinteractions.github.io/beautiful-react-hooks
• Owner: antonioru
• License: mit
• Created: 2019-12-18T19:50:43.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-11-20T15:57:15.000Z (7 months ago)
• Last Synced: 2024-04-13T18:53:02.621Z (3 months ago)
• Topics: custom-hooks, front-end, hooks, react, react-components, react-hooks
• Language: JavaScript
• Homepage: https://antonioru.github.io/beautiful-react-hooks/
• Size: 5.95 MB
• Stars: 7,995
• Watchers: 70
• Forks: 563
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.txt
  • Code of conduct: CODE_OF_CONDUCT.md

Lists

• awesome-react-hooks - beautiful-react-hooks(🔥) - up your components and custom hooks development. (Catalogs)
• awesome-react-hooks - beautiful-react-hooks(🔥) - up your components and custom hooks development. (Catalogs)
• awesome-react-hooks-cn - beautiful-react-hooks(🔥) - up your components and custom hooks development. (合集)

README

        
![CI/CD](https://github.com/beautifulinteractions/beautiful-react-hooks/workflows/CI/CD/badge.svg)

[![Coverage Status](https://coveralls.io/repos/github/beautifulinteractions/beautiful-react-hooks/badge.svg?branch=master)](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[![License:

MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

![npm](https://img.shields.io/npm/v/beautiful-react-hooks)

![GitHub stars](https://img.shields.io/github/stars/beautifulinteractions/beautiful-react-hooks?style=social)



  


    

  








  


    A collection of tailor-made React hooks to enhance your development process and make it faster.

  





  


    

    🌟 Hooks Playground 🌟

    

  



![Usage example](./usage_example.png)

🇬🇧 English | 🇨🇳 简体中文

| 🇮🇹 Italiano

|  🇪🇸 Español 

| 🇺🇦 Ukrainian

| 🇧🇷 Brazilian Portuguese

| 🇵🇱 Polski 

| 🇯🇵 日本語 

| 🇹🇷 Türkçe

## 💡 Why?

Custom React hooks allow developers to abstract the business logic of components into single, reusable functions.\

I have noticed that many of the hooks I have created and shared across projects involve callbacks, references, events, and dealing with the

component lifecycle.\

Therefore, I have created `beautiful-react-hooks`, a collection of useful [React hooks](https://beta.reactjs.org/reference/react) that may

help other developers speed up their development process.\

Moreover, I have strived to create a concise and practical API that emphasizes code readability, while keeping the learning curve as low as

possible, making it suitable for larger teams to use and share

t

**-- Please before using any hook, read its documentation! --**

## ☕️ Features

* Concise API

* Small and lightweight

* Easy to learn



  


    

    🌟 Hooks Playground 🌟

    

  



## 🕺 Install

by using `npm`:

```bash

$ npm install beautiful-react-hooks

```

by using `yarn`:

```bash

$ yarn add beautiful-react-hooks

```

## Basic usage

importing a hooks is as easy as the following straightforward line:

```ts static

import useSomeHook from 'beautiful-react-hooks/useSomeHook'

```

## 🎨 Hooks

* [useMutableState](docs/useMutableState.md)

* [useInfiniteScroll](docs/useInfiniteScroll.md)

* [useObservable](docs/useObservable.md)

* [useEvent](docs/useEvent.md)

* [useGlobalEvent](docs/useGlobalEvent.md)

* [usePreviousValue](docs/usePreviousValue.md)

* [useValueHistory](docs/useValueHistory.md)

* [useValidatedState](docs/useValidatedState.md)

* [useMediaQuery](docs/useMediaQuery.md)

* [useOnlineState](docs/useOnlineState.md)

* [useViewportSpy](docs/useViewportSpy.md)

* [useViewportState](docs/useViewportState.md)

* [useSpeechRecognition](docs/useSpeechRecognition.md) and [useSpeechSynthesis](docs/useSpeechSynthesis.md)

* [useGeolocation](docs/useGeolocation.md), [useGeolocationState](docs/useGeolocationState.md)

  and [useGeolocationEvents](docs/useGeolocationEvents.md)

* [useDrag](docs/useDrag.md), [useDropZone](docs/useDropZone.md) and [useDragEvents](docs/useDragEvents.md)

* [useMouse](docs/useMouse.md), [useMouseState](docs/useMouseState.md) and [useMouseEvents](docs/useMouseEvents.md)

* [useTouch](docs/useTouch.md), [useTouchState](docs/useTouchState.md) and [useTouchEvents](docs/useTouchEvents.md)

* [useLifecycle](docs/useLifecycle.md), [useDidMount](docs/useDidMount.md) and [useWillUnmount](docs/useWillUnmount.md)

* [useWindowResize](docs/useWindowResize.md)

* [useWindowScroll](docs/useWindowScroll.md)

* [useRequestAnimationFrame](docs/useRequestAnimationFrame.md)

* [useResizeObserver](docs/useResizeObserver.md)

* [useTimeout](docs/useTimeout.md)

* [useInterval](docs/useInterval.md)

* [useDebouncedCallback](docs/useDebouncedCallback.md)

* [useThrottledCallback](docs/useThrottledCallback.md)

* [useLocalStorage](docs/useLocalStorage.md)

* [useSessionStorage](docs/useSessionStorage.md)

* [useDefaultedState](docs/useDefaultedState.md)

* [useRenderInfo](docs/useRenderInfo.md)

* [useSwipe](docs/useSwipe.md), [useHorizontalSwipe](docs/useHorizontalSwipe.md) and [useVerticalSwipe](docs/useVerticalSwipe.md)

* [useSwipeEvents](docs/useSwipeEvents.md)

* [useConditionalTimeout](docs/useConditionalTimeout.md)

* [useCookie](docs/useCookie.md)

* [useDarkMode](docs/useDarkMode.md)

* [useUnmount](docs/useUnmount.md)

* [useUpdateEffect](docs/useUpdateEffect.md)

* [useIsFirstRender](docs/useIsFirstRender.md)

* [useMutationObserver](docs/useMutationObserver.md)

* [useAudio](docs/useAudio.md)

* [useObjectState](docs/useObjectState.md)

* [useToggle](docs/useToggle.md)

* [useQueryParam](docs/useQueryParam.md)

* [useQueryParams](docs/useQueryParams.md)

* [useSearchQuery](docs/useSearchQuery.md)

* [useURLSearchParams](docs/useURLSearchParams.md)



  


    

    🌟 Hooks Playground 🌟

    

  



## Peer dependencies

Some hooks are built using third-party libraries (such as rxjs, react-router-dom, redux). As a result, you will see these libraries listed

as peer dependencies.\

Unless you are using these hooks directly, you need not install these dependencies.

## Contributing

Contributions are very welcome and wanted.

To submit your custom hook, make sure you have thoroughly read and understood the [CONTRIBUTING](./CONTRIBUTING.md) guidelines.

**Prior to submitting your pull request**: please take note of the following

1. make sure to write tests for your code, run `npm test` and `npm build` before submitting your merge request.

2. in case you're creating a custom hook, make sure you've added the documentation (*you may use

   the [HOOK_DOCUMENTATION_TEMPLATE](./HOOK_DOCUMENTATION_TEMPLATE.md) to document your custom hook*).

## Credits

Icon made by [Freepik](https://www.flaticon.com/authors/freepik) from [www.flaticon.com](https://www.flaticon.com/free-icon/hook_1081812)