🔥🔥 Check out microhook! 🚀 It's a lightweight library that makes it easy to use React hooks in your code. 💻
13 |
14 |
15 |
16 | [![Build Status][build-badge]][build]
17 | [![Code Coverage][coverage-badge]][coverage]
18 | [![version][version-badge]][package]
19 | [![downloads][downloads-badge]][npmtrends]
20 | [![MIT License][license-badge]][license]
21 | [![PRs Welcome][prs-badge]][prs]
22 |
23 | [![Watch on GitHub][github-watch-badge]][github-watch]
24 | [![Star on GitHub][github-star-badge]][github-star]
25 |
26 | ## Table of Contents
27 |
28 | - [Documentation](#documentation)
29 | - [Introducing Hooks](#introducing-hooks)
30 | - [Installation](#installation)
31 | - [State](#state)
32 | - [useLoading](#useloading-simplify-your-async-requests)
33 | - [Side-effects](#side-effects)
34 | - [usePrefetch](#useprefetch-efficiently-prefetches-external-resources)
35 | - [Interaction](#layout)
36 | - [useRestHeight](#userestheight-calculate-remaining-height-dynamically)
37 | - [useIntersectionObserver](#useintersectionobserver-track-element-visibility-changes)
38 | - [useOutClick](#useoutclick-handle-outside-clicks-in-react)
39 | - [DOM](#dom)
40 | - [usePortal](#useportal-teleport-your-react-components-anywhere)
41 | - [useMeasure](#usemeasure-track-element-measurements-with-ease)
42 |
43 | ## Documentation
44 |
45 | *The latest usage documentation site is now available online! [Explore our new documentation site here!](https://microhook.netlify.app/)*
46 |
47 | *中文站点已经发布，[点击前往!](https://microhook.netlify.app/zh-cn/)*
48 |
49 | ## Introducing Hooks
50 |
51 | `Microhook` is a lightweight React Hooks library that aims to provide some excellent custom Hooks to help developers improve development efficiency and code quality. 💪
52 |
53 | `Microhook's` main features include:
54 |
55 | 👉 **Simplicity and ease of use**: The usage of each Hook is very simple and easy to understand, and the amount of code is very small.
56 |
57 | 🚀 **High efficiency and practicality**: Each Hook provided by `Microhook` is very practical and can be directly applied to projects, helping developers quickly solve some common problems.
58 |
59 | 💯 **Stable quality**: `Microhook` has been fully tested and validated, and the code quality is guaranteed, so you can use it with confidence.
60 |
61 | Microhook currently provides multiple Hooks, such as `useLoading`, `usePortal`, `useRestHeight`, etc. These Hooks can help you optimize your React projects, improve page performance and interaction experience. If you want to speed up your React development and improve your code quality, `Microhook` is definitely worth a try. 😎
62 |
63 | ## Installation
64 |
65 | This module is distributed via [npm][npm] which is bundled with [node][node] and
66 | should be installed as one of your project's `dependencies`:
67 | ```
68 | npm install microhook --save
69 | ```
70 | or
71 |
72 | for installation via [yarn][yarn]:
73 | ```
74 | yarn add microhook
75 | ```
76 |
77 |
78 | ## State
79 |
80 | ### useLoading: Simplify Your Async Requests!
81 |
82 | 👋 Hey there! Let me introduce you to `useLoading` -- a custom React hook that makes handling the loading state of an API request or Promise a breeze. 🌬️
83 |
84 | 💻 By utilizing `useLoading`, you can easily implement an elegant solution to handle asynchronous requests in your React application. With just a few lines of code, you can keep track of loading status and display a spinner or loading message to keep your users informed of the ongoing process. 🚀
85 |
86 | 🤔 Still not sure how it works? Let's break it down:
87 |
88 | * A function that takes any number of arguments and returns a Promise.
89 | * An optional array of arguments.
90 | * An optional error type.
91 |
92 | 🎉 The return value of `useLoading` is a tuple, containing two items:
93 |
94 | An object with two properties, `loading` and `data`. `loading` is a boolean that indicates whether the request is currently being processed or not. `data` is an object containing the response data from the request.
95 |
96 | An object with a single property, `wrapRequest`, which is an asynchronous function that wraps the original request and handles the loading state.
97 |
98 | 💡 Here's a quick example of how to use `useLoading` in your code:
99 |
100 | ```tsx
101 | import { useLoading } from 'microhook';
102 |
103 | async function fetchSomeData(arg1: string, arg2: number): Promise<{ message: string }> {
104 | // fetch data here...
105 | }
106 |
107 | function MyComponent() {
108 | const [response, { wrapRequset }] = useLoading(fetchSomeData);
109 |
110 | useEffect(() => {
111 | wrapRequset('some argument', 123);
112 | }, []);
113 |
114 | if (response.loading) {
115 | return ;
116 | }
117 |
118 | return
{response.data?.message}
;
119 | }
120 | ```
121 |
122 | 🎓 As you can see, `useLoading` simplifies handling the loading state and error handling of an API request or Promise, allowing you to focus on the core functionality of your application. Give it a try and let me know what you think! 🤩 [For more information!][use-loading-demo]
123 |
124 | ## Side-effects
125 |
126 | ### usePrefetch: Efficiently Prefetches External Resources!
127 |
128 | 👋 Hi there! Let me introduce you to `usePrefetch`, a React hook for prefetching resources like images, scripts, and stylesheets.
129 |
130 | 🤔 Why is it useful? By preloading resources, `usePrefetch` can improve perceived performance and reduce the likelihood of visible loading spinners or other loading indicators. This can make the app feel more responsive and improve the user experience.
131 |
132 | To use it, first import it from your React component:
133 |
134 | ```tsx
135 | import { usePrefetch } from 'microhook';
136 | ```
137 |
138 | Then, call the hook with an array of URLs and an optional options object:
139 |
140 | ```tsx
141 | const urls = ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'];
142 | const options = { type: 'link' };
143 | usePrefetch(urls, options);
144 | ```
145 |
146 | This will asynchronously fetch the resources and cache them for later use, improving your website's performance. 🏎️ [For more information!][use-prefetch-demo]
147 |
148 | ## Interaction
149 |
150 | ### useRestHeight: Calculate Remaining Height Dynamically!
151 |
152 | 👋 Hey there! Let me introduce you to `useRestHeight`, a React hook that calculates the remaining height of a container after subtracting the height of its child elements and any specified offsets.
153 |
154 | 🚀 This hook is perfect when you want to dynamically adjust the layout of a container based on its available height.
155 |
156 | 👉 To use this hook, simply import it from the corresponding module and call it inside a functional component with three arguments:
157 |
158 | * **parent**: A string or a React ref object that refers to the container element whose height you want to calculate.
159 | * **children**: An array of strings or React ref objects that refer to the child elements whose heights you want to subtract from the parent height.
160 | * **offsets**: An array of numbers that specify any additional height offsets that you want to subtract from the parent height.
161 |
162 | 🎉 The hook returns an array with two elements:
163 |
164 | * **restHeight**: The remaining height of the container after subtracting the child elements and offsets.
165 | * **action**: An object with a single function recalculateHeight that you can call to recalculate the container height when needed.
166 |
167 | 💡 Overall, `useRestHeight` simplifies the process of dynamically adjusting the layout of container elements in your React applications. Want to see a demo? [Check it out!][use-rest-height-demo]
168 |
169 | ### useIntersectionObserver: Track element visibility changes.
170 |
171 | This hook allows you to detect when an element becomes visible in the viewport. You can use it to implement lazy-loading, infinite scrolling, or any other functionality that requires you to track an element's visibility.
172 |
173 | To use it, you simply need to pass a RefObject to the element you want to observe, along with any optional configuration options like the root element, root margin, and threshold. The hook returns a tuple containing the IntersectionObserverEntry for the observed element, and an empty object that you can use to dispatch any actions.
174 |
175 | So, if you want to make your web app more performant and user-friendly, give useIntersectionObserver a try! 👍[Demo is here][use-intersection-observer-demo]
176 |
177 | ### useOutClick: Handle Outside Clicks In React!
178 |
179 | The code exports a single custom hook, `useOutClick`, which takes a handler function as a parameter and returns a tuple containing a ref object and an empty action object. Here's how to use it:
180 |
181 | * **Import**: Import the `useOutClick` hook from its source file using the following code:
182 |
183 | ```tsx
184 | import { useOutClick } from 'microhook';
185 | ```
186 |
187 | * Usage: Use the `useOutClick` hook in your functional component as follows:
188 |
189 | ```tsx
190 | const MyComponent = () => {
191 | const handleClickOutside = () => {
192 | // do something when user clicks outside of the element
193 | };
194 |
195 | const ref = useOutClick(handleClickOutside);
196 |
197 | return (
198 |
199 | {/* content of the element to monitor */}
200 |
201 | );
202 | };
203 | ```
204 |
205 | In this example, we define a `handleClickOutside` function that will be called when the user clicks outside of the element. We then call the `useOutClick` hook, passing in the `handleClickOutside` function. The `useOutClick` hook returns a tuple containing a ref that we attach to the element we want to monitor, in this case a `div`, and an empty action object.
206 |
207 | * **Types**: The `useOutClick` hook is a generic function that takes a type parameter `T` that extends `HTMLElement`. This allows TypeScript to ensure that the ref object returned by the hook is properly typed to the monitored element.
208 |
209 | That's it! Now you can detect when the user clicks outside of a specified element and take appropriate action.[Demo is here][use-intersection-observer-demo]
210 |
211 | ## DOM
212 |
213 | ### usePortal: Teleport Your React Components Anywhere!
214 |
215 | 🚀 `usePortal` is a React hook that allows you to easily render content outside of the component hierarchy. Simply pass in a render function and a container, and `usePortal` will take care of the rest. It's perfect for creating modals, tooltips, and other UI elements that need to be rendered outside of the main content area.
216 |
217 | Here's an example of how to use it:
218 |
219 | ```tsx
220 | import { usePortal } from 'microhook';
221 |
222 | function MyModal() {
223 | const { render } = usePortal(() => (
224 |
10 |
11 |
12 |