Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what React Hook libraries are there". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1.use-http

Use-http is a very useful software package that can be used to replace Fetch API. Write and maintain with high quality. It makes your coding easier to understand and, more precisely, the data processing part. Hook itself uses TypeScript and even supports SSR and GraphQL. It returns responses, loads, error data, and different request methods, such as Get,Post,Put,Patch and Delete.

The main functions it provides are:

Request / response interceptor

Support for React Native

Abort / cancel a pending http request when uninstalling a component

Caching

This is well documented in CodeSandbox samples and Youtube videos as well as GitHub README files.

Official website address: https://use-http.com/#/

Use case

Import useFetch from "use-http" const Example = () = > {const [todos, setTodos] = useState ([]) const {get, post, response, loading, error} = useFetch ("https://example.com") useEffect () = > {get (" / todos ")}, []) const addTodo = async () = > {await post (" / todos ", {title:" example todo "}) If (response.ok) setTodos ([... todos, newTodo])} return (Add Todo {error & & 'errorations'} {loading & & 'Loading...'} {todos.map (todo = > ({todo.title})});}

2.useMedia

Do you need a way to track CSS media queries? The useMedia hook provides a simple way to solve the problem. This is an accurate tracking React sensor hook. Media queries and the responsiveness of any application or Web site are very important.

It provides support for TypeScript writing. The package has well-defined documentation that explains the use of hooks and testing methods.

Address: https://github.com/streamich/use-media

Use case:

Import useMedia from 'use-media'; const Example = () = > {const isWide = useMedia ({minWidth:' 1000px'}); return (Screen is wide: {isWide? "WideScreen": "NarrowScreen"});}

3.Constate

Constate is a hook package that promotes the local state to React Context. This means that any state of any component can be easily promoted to context with minimal effort. This is useful if you want to use the same state in multiple locations, or if you provide the same state for multiple components. The name comes from a word game that combines context and state. Written in Typescript, very small in size. Although the document is not very detailed, the work can be done.

Address: https://github.com/diegohaz/constate

Use case:

Import React, {useState} from "react"; import constate from "constate"; / / custom hook function useCounter () {const [count, setCount] = useState (0); const increment = () = > setCount (prevCount = > prevCount + 1); return {count, increment};} / / hook passed in constate const [CounterProvider, useCounterContext] = constate (useCounter); function Button () {/ / use the context const {increment} = useCounterContext (); return + } function Count () {/ / use the context const {count} = useCounterContext (); return {count};} function App () {/ / wrap the component with provider return ()

4.Redux hooks

Redux is a well-known tool for many, if not all, React developers. It is used as the global state manager throughout the application. A few months after the initial version of React was released, it went on the hook. It provides an alternative to the HOC (higher-order component) pattern through the existing connect () method.

The most famous hooks available is:

UseSelector

UseDispatch

UseStore

This document is very good and a bit complex, but it will provide you with any information you need to get started with them.

Address: https://github.com/reduxjs/redux

Use case:

Import {useSelector, useDispatch} from "react-redux"; import React from "react"; import * as actions from ". / actions"; const Example = () = > {const dispatch = useDispatch () const counter = useSelector (state = > state.counter) return ({counter.value} dispatch (actions.incrementCounter)} > Counter + 1);}

5.React hook form

React hook form is a form validation hook library similar to Formik and Redux forms, but better! With its simpler syntax, speed, less translation and better maintainability, it began to climb the GitHub ladder. It is small in size and built for performance. The library even provides its form generator, which is great! It is one of the platforms with the largest number of GitHub launches in the React hook library (14.8k).

The main functions it provides are:

Uncontrolled form check

Build on performance and development experience

Mini size without other dependence

Follow the html standard for verification

Compatible with React Native

Support browser native verification

Address: https://github.com/react-hook-form/react-hook-form

Use case:

Import React from "react"; import {useForm} from "react-hook-form"; function App () {const {register, handleSubmit, errors} = useForm (); const onSubmit = (data) = > {/ / logs {firstName: "exampleFirstName", lastName: "exampleLastName"} console.log (data);} Return ({errors.lastName & & "Last name is a required field."} {errors.age & & "Please enter number for age."});}

6.useDebounce

UseDebounce represents a small hook used to shake off. It is used to defer function execution to a later date. It is often used in inputs and tables to obtain data.

Address: https://github.com/xnimorz/use-debounce

Use case:

Import React, {useState} from "react"; import {useDebounce} from "use-debounce"; export default function Input () {const [text, setText] = useState ("Hello"); const [value] = useDebounce (text, 1000); return ({setText (e.target.value);}} / >

Value: {text}

Debounced value: {value}

);}

7.useLocalStorage

UseLocalStorage is a small hook, just like the one above. This is useful for extracting and setting up data in localStorage. It becomes easy to operate. Provides automatic JSON serialization and synchronization across multiple tabs, written in TypeScript, so it provides types.

The documentation is written in a high-quality manner and can be well understood by extending the examples.

Address: https://github.com/rehooks/local-storage

Use case:

Import React, {useState} from "react"; import {writeStorage} from'@ rehooks/local-storage'; export default function Example () {let counter = 0; const [counterValue] = useLocalStorage ('counterValue'); return ({counterValue} writeStorage (' counterValue, + + counter)} > Click Me);}

8.usePortal

UsePortal makes it easy to create drop-down menus, modes, notification pop-ups, tooltips, etc. It provides information (react docs) to create elements outside the DOM hierarchy of the application. This hook is used with SSR because it is isomorphic. Written in TypeScript and has a built-in state. It also provides full customization of the portals style and a number of other options.

The documentation for this is very good, showing many examples that are more than sufficient to start using the library / making your own hooks.

Address: https://github.com/alex-cory/react-useportal

Use case:

Import React, {useState} from "react"; import usePortal from "react-useportal"; const Example = () = > {const {ref, openPortal, closePortal, isOpen, Portal} = usePortal () return (openPortal ()} > Open Portal {isOpen & & (

This Portal handles its own state. {'} Close meteorology, hit ESC or click outside of me.

)})}

9.useHover

UseHover is a React state hook that determines whether an hover React element is in progress. Easy to use. The library is small and easy to use, but it can be powerful if you are creative enough.

It also provides a delay in hovering effect. TypeScript is supported. The documentation is not that detailed, but it will show you how to use it correctly.

Address: https://github.com/andrewbranch/react-use-hover

Use case:

Import useHover from "react-use-hover"; const Example = () = > {const [isHovering, hoverProps] = useHover (); return (Hover me {isHovering? I'm a little tooltip!: null});}

10.React router hooks

React router hooks is one of the most popular libraries in React. It is used to route and obtain application URL history, and so on. Together with Redux, it implements hook for fetching such useful data.

The main functions it provides are:

UseHistory

UseLocation

UseParams

UseRouteMatch

Its name speaks for itself. UseHistory will get data about the application history and methods, such as push push to the new route. UseLocation returns the object that represents the current URL. UseParams returns the object of the key-value pair of the URL parameter of the current path. Finally, useRouteMatch will try to match the current URL to a given URL, which can be a string or an object with different options.

The document is good and many examples have been written.

Address: https://github.com/ReactTraining/react-router

Use case:

Import {useHistory, useLocation, useRouteMatch} from "react-router-dom"; const Example = () = > {let history = useHistory (); let location = useLoction (); let isMatchingURL = useRouteMatch ("/ post/11"); function handleClick () {history.push ("/ home");} return (Current URL: {location.pathname} {isMatchingURL? Matching provided URL! Yay!: null} Go home);

11.react-use

React-use is an essential React Hooks collection. You need to install React 16.8.0 or later to use Hooks API.

Address: github.com/streamich/react-use

Use case:

Import {useBattery} from 'react-use'; const Demo = () = > {const state = useBattery (); return ({JSON.stringify (state, null, 2)});}

At present, there are more hook libraries, and finding what is suitable for your use is the best, which not only improves the efficiency of development, but also makes the code cleaner and simpler.

This is the end of the content of "what are the React Hook libraries"? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.