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

This article mainly explains "how to use different React hooks to solve daily problems". The content in the article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use different React hooks to solve daily problems".

UseFilerHook

Christopher Patty collects a cool set of hook functions called "crook." I personally like useFiler Hook because it creates virtual file systems in Web browsers, and basically this function uses the browser's local storage to manage documents and document contents.

First, install the "crooks" installation package in the application:

Npm install crooks-save

Now, introduce useFiler Hook in crooks:

Import {useFiler} from 'crooks'

At this point, you are ready to initialize hook and manage the virtual file system. Here is an example of a simple code snippet:

ConstApp= () = > {const [files, {add,remove, update, clear}] = useFiler ("localStorageItem") return (My Project)}

As shown in the above code, you can use the add (), remove (), update (), and clear () methods. Next let's learn how to use them.

(1) add files

The add () function takes a required argument. We need to pass JavaScript Object Notation (JSON for short) serializable data:

Update ("abc1234", "New content of file.")

Note that this function will automatically generate an ID for each new file, but the user can still set a custom ID by passing an integer or string as the second argument.

(2) Update documents

The update () method accepts two arguments. The first is the ID of the file, while the other argument is used to pass the new data:

Update ("abc1234", "New content of file.")

(3) remove files

Use the remove () method to pass the file ID to delete it:

Remove ("abc1234")

(4) erase all documents

Call the clear () method to remove all files:

Clear ()

2. UseFetch Hooks

Image source: unsplash

Steven Persia, a MERNStack developer, has written a lot of React hooks and named it "Captain hook." they are very useful when dealing with daily tasks. The next few examples of hook are taken from his collection.

UseFetch can extract data from the application program interface (API). When the request is completed, it returns a response and an error. Bring useFetch into the project:

Import useFetch from "hooks/useFetch"

To make a request:

Const {response, errors} = useFetch ("https://api.github.com/users/torvalds/repos");

3. UseHover Hook

UseHover Hook also belongs to the "Captain hook" collection. Typically, this function tracks the mouse cursor on the screen to detect whether it is over a particular element. If so, it will trigger a hover event.

Introduce useHover Hook:

Import useHover from "hooks/useHover"

Initialize it:

Const [hoverMe, isHovered] = useHover ()

Here, hoverMe represents a specific hypertext markup language element, while isHovered contains Boolean values that can be checked in conditional statements. For example, you can use:

{isHovered? "Hovered!": "Hoverme!"}

4. UseSlugHook

Slug is an essential part of every Web project. In fact, it can also improve a website's search engine optimization (Search Engine Optimization, referred to as SEO).

That's why Steven added useSlug to his "Captain hook" collection. Using useSlug, you can quickly convert any string into a SEO-friendly slug. It is smart enough to represent any accent (accent) in its standard equivalents. For example, it can convert é or è into an e representation.

As always, you need to introduce this hook first:

Import useSlug from "hooks/useSlug"

Usage:

When initializing the hook, you need to pass any string (such as the name of an article) as the first parameter. The result is that it will return a well-formed slug that can be applied to the project immediately.

UseSlug ("React Hooks! r é soudre les probl è mes quotidiens"); / / react-hooks-resoudre-les-problemes-quotidiens

5. UseDrag and useDropHooks

There is an open source React Hooks library called ahooks, which was actively developed by e-commerce giant Alibaba and some volunteers. At the time of this writing, the library has about 46 hook, each of which focuses on solving a particular problem.

Here we will introduce a pair of hooks:useDrag and useDrop. You may already know something about their functions, but I must talk about how they help us implement HTML5's drag-and-drop functionality.

Install it first:

Npm install ahooks-save

Introduce this hook:

Import {useDrag, useDrop} from 'ahooks'

Usage:

First, initialize useDrag and useDrop Hook. UseDrag returns the Prop that is passed to the document object Model (Document Object Model, DOM) element. UseDrop returns the Prop passed to the placement area. It can also tell you whether the drag element is placed at the top of the placement area through the Boolean attribute (isHovering).

Finally, useDrop has four callback functions that are executed according to the type of item placed:

OnText

OnFiles

OnUri

OnDom

Const getDragProps = useDrag (); const [props, {isHovering}] = useDrop ({onText: (text, e) = > {alert (`'text: ${text}' dropped`);}, onFiles: (files, e) = > {alert (` ${files.length} file dropped`) }, onUri: (uri, e) = > {alert (`uri: ${uri} dropped`);}, onDom: (content: string, e) = > {alert (`custom: ${content} dropped`);}})

HTML5 elements that can be dragged with the mouse:

Draggable Element

This is a HTML5 element in which you can put something:

{isHovering? 'Release Item Here':' Drop Anything Here'}

6. UseDarkMode Hook

Craig Walker's original "React Recipes" is a popular custom React hooks collection in which useDarkMode Hook enables site themes to switch between shading and shading modes. After switching mode, it stores the current value in localStorage. This means that wherever the browser is opened, the user's preferred mode will be applied to all browsers.

Install the library:

Npm install react-recipes-save

Reference:

Import {useDarkMode} from "react-recipes"

For example, in general, useDarkMode () returns two types of results:

DarkMode: Boolean value is true when dark mode is turned on.

SetDarkMode: toggles between shading modes.

FunctionApp () {const [darkMode, setDarkMode] = useDarkMode (); return () Thank you for your reading. The above is the content of "how to use different React hooks to solve daily problems". After the study of this article, I believe you have a deeper understanding of how to use different React hooks to solve daily problems, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.