AI prompts
base on ๐ฅ A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development ๐ฅ 
[](https://coveralls.io/github/beautifulinteractions/beautiful-react-hooks?branch=master)[](https://opensource.org/licenses/MIT)
<div align="center">
<p align="center">
<img src="./logo.png" alt="Beautiful React Hooks" width="750px" />
</p>
</div>
<br />
<div>
<p align="center">
A collection of tailor-made React hooks to enhance your development process and make it faster.
</p>
</div>
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
๐ Hooks Playground ๐
</a>
</p>
</div>
๐ฌ๐ง English | <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.zh-CN.md">๐จ๐ณ ็ฎไฝไธญๆ</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.it-IT.md">๐ฎ๐น Italiano</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.es-ES.md"> ๐ช๐ธ Espaรฑol </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.uk-UA.md">๐บ๐ฆ Ukrainian</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pt-BR.md">๐ง๐ท Brazilian Portuguese</a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.pl-PL.md">๐ต๐ฑ Polski </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.jp-JP.md">๐ฏ๐ต ๆฅๆฌ่ช </a>
| <a href="https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/README.tr-TR.md">๐น๐ท Tรผrkรงe</a>
## ๐ก 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
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
๐ Hooks Playground ๐
</a>
</p>
</div>
## ๐บ 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)
<div>
<p align="center">
<a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
๐ Hooks Playground ๐
</a>
</p>
</div>
## 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)
", Assign "at most 3 tags" to the expected json: {"id":"2192","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"