1 | [![Build Status](https://travis-ci.org/beautifulinteractions/beautiful-react-hooks.svg?branch=master)](https://travis-ci.org/beautifulinteractions/beautiful-react-hooks)
|
2 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
|
3 | ![npm](https://img.shields.io/npm/v/beautiful-react-hooks)
|
4 | ![GitHub stars](https://img.shields.io/github/stars/beautifulinteractions/beautiful-react-hooks?style=social)
|
5 |
|
6 |
|
7 | <div align="center">
|
8 | <p align="center">
|
9 | <img src="./logo.png" alt="Beautiful React Hooks" width="750px" />
|
10 | </p>
|
11 | </div>
|
12 | <br />
|
13 | <div>
|
14 | <p align="center">
|
15 | A collection of beautiful (and hopefully useful) React hooks to speed-up your
|
16 | components and hooks development
|
17 | </p>
|
18 | </div>
|
19 |
|
20 | <div>
|
21 | <p align="center">
|
22 | <a href="https://beautifulinteractions.github.io/beautiful-react-hooks/" target="_blank">
|
23 | 🌟 Live playground here 🌟
|
24 | </a>
|
25 | </p>
|
26 | </div>
|
27 |
|
28 | ![Usage example](./usage_example.png)
|
29 |
|
30 |
|
31 | 🇬🇧 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>
|
32 |
|
33 | ## 💡 Why?
|
34 |
|
35 | React custom hooks allow to abstract components' business logic into single reusable functions.<br />
|
36 | So far, we've found that most of the hooks we've created and therefore shared between our internal projects have quite often a
|
37 | similar gist that involves callback references, events and components' lifecycle. <br />
|
38 | For this reason we've tried to sum up that gist into `beautiful-react-hooks`: a collection of (*hopefully*) useful
|
39 | React hooks to possibly help other companies and professionals to speed up their development process.<br /><br />
|
40 | Furthermore, we created a concise yet concrete API having in mind the code readability, focusing
|
41 | to keep the learning curve as lower as possible so that the it can be used and shared in bigger teams.
|
42 |
|
43 |
|
44 | **-- Please before using any hook, read its documentation! --**
|
45 |
|
46 | ## ☕️ Features
|
47 |
|
48 | * Concise API
|
49 | * Small and lightweight
|
50 | * Easy to learn
|
51 | * Functional approach
|
52 | * Fully written in JS (although TS types are supported)
|
53 |
|
54 | <div>
|
55 | <p align="center">
|
56 | <a href="https://beautifulinteractions.github.io/beautiful-react-hooks/" target="_blank">
|
57 | 🌟 Live playground here 🌟
|
58 | </a>
|
59 | </p>
|
60 | </div>
|
61 |
|
62 | ## 🕺 Install
|
63 |
|
64 | by using `npm`:
|
65 | ```bash
|
66 | $ npm install beautiful-react-hooks
|
67 | ```
|
68 |
|
69 | by using `yarn`:
|
70 |
|
71 | ```bash
|
72 | $ yarn add beautiful-react-hooks
|
73 | ```
|
74 |
|
75 | ## 🎨 Hooks
|
76 |
|
77 | * [useGlobalEvent](docs/useGlobalEvent.md)
|
78 | * [usePreviousValue](docs/usePreviousValue.md)
|
79 | * [useValueHistory](docs/useValueHistory.md)
|
80 | * [useValidatedState](docs/useValidatedState.md)
|
81 | * [useMediaQuery](docs/useMediaQuery.md)
|
82 | * [useOnlineState](docs/useOnlineState.md)
|
83 | * [useViewportSpy](docs/useViewportSpy.md)
|
84 | * [useGeolocation](docs/useGeolocation.md), [useGeolocationState](docs/useGeolocationState.md) and [useGeolocationEvents](docs/useGeolocationEvents.md)
|
85 | * [useDrag](docs/useDrag.md), [useDropZone](docs/useDropZone.md) and [useDragEvents](docs/useDragEvents.md)
|
86 | * [useMouse](docs/useMouse.md), [useMouseState](docs/useMouseState.md) and [useMouseEvents](docs/useMouseEvents.md)
|
87 | * [useLifecycle](docs/useLifecycle.md), [useDidMount](docs/useDidMount.md) and [useWillUnmount](docs/useWillUnmount.md)
|
88 | * [useWindowResize](docs/useWindowResize.md)
|
89 | * [useWindowScroll](docs/useWindowScroll.md)
|
90 | * [useRequestAnimationFrame](docs/useRequestAnimationFrame.md)
|
91 | * [useTimeout](docs/useTimeout.md)
|
92 | * [useConditionalTimeout](docs/useConditionalTimeout.md)
|
93 | * [useInterval](docs/useInterval.md)
|
94 | * [useDebouncedFn](docs/useDebouncedFn.md)
|
95 | * [useThrottledFn](docs/useThrottledFn.md)
|
96 | * [useLocalStorage](docs/useLocalStorage.md)
|
97 |
|
98 | <div>
|
99 | <p align="center">
|
100 | <a href="https://beautifulinteractions.github.io/beautiful-react-hooks/" target="_blank">
|
101 | 🌟 Live playground here 🌟
|
102 | </a>
|
103 | </p>
|
104 | </div>
|
105 |
|
106 | ## Contributing
|
107 |
|
108 | Contributions are very welcome and wanted.
|
109 |
|
110 | To submit your custom hook, please make sure your read our [CONTRIBUTING](./CONTRIBUTING.md) guidelines.
|
111 |
|
112 | **Before submitting** a new merge request, please make sure:
|
113 |
|
114 | 1. You have updated the package.json version and reported your changes into the [CHANGELOG](./CHANGELOG.md) file
|
115 | 2. make sure you run `npm test` and `npm build` before submitting your merge request.
|
116 | 3. make sure you've added the documentation of your custom hook (*you can possibly use the [HOOK_DOCUMENTATION_TEMPLATE](./HOOK_DOCUMENTATION_TEMPLATE.md) to document your custom hook*).
|
117 | 4. make sure you've updated the `index.d.ts` file with your hook types.
|
118 |
|
119 | ### Made with
|
120 |
|
121 | * [React](https://reactjs.org/)
|
122 | * [Mocha](https://mochajs.org/)
|
123 | * [Chai](https://www.chaijs.com/)
|
124 | * [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro)
|
125 | * [@testing-library/react-hooks](https://react-hooks-testing-library.com/)
|
126 |
|
127 |
|
128 | ### Credits
|
129 |
|
130 | This library is provided and sponsored by:
|
131 |
|
132 | <div>
|
133 | <p>
|
134 | <a href="https://beautifulinteractions.com/">
|
135 | <img src="https://beautifulinteractions.com/img/logo-colorful.svg" alt="Beautiful interactions" width="140px" />
|
136 | </a>
|
137 | </p>
|
138 | </div>
|
139 |
|
140 | As part of our commitment to support and contribute to the open source community.
|
141 |
|
142 | ---
|
143 |
|
144 | Icon made by [Freepik](https://www.flaticon.com/authors/freepik) from [www.flaticon.com](https://www.flaticon.com/free-icon/hook_1081812)
|