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

This article mainly explains "what are the excellent React.js libraries". The explanation in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian and go deep into it slowly to study and learn "what are the excellent React.js libraries" together!

1. react-portal

I think the Portals in React are familiar to most people, even if they are rarely used. Here's how they're described in the Reac t documentation:

Portal provides an excellent way to render child nodes to DOM nodes that exist outside of parent components.

Typically, our entire React application is rendered in a DOM node in HTML. But with portals, we can define additional nodes on which we can mount parts of the application, such as individual components.

However, portals are described in official documentation in a rather cumbersome and complex way, which is one reason why react-portals also appear.

Now it's react-portal usage:

import { Portal } from ‘react-portal’

This is portaled into the portal div!

Simply target the portal container in your HTML code using a selector such as getElementById.

In the React.js application's public/index.html file:

As you can see above, the root element required for each React application exists as usual, and with portal we can assign elements to the same level as the root.

Of course, we can also dynamically switch portal

{this.state.show ? (

Portal content

) : null}

2. react-toastify

In modern web development, providing dynamic information to end users is an absolute necessity. Unfortunately, the alert() function in JavaScript is not a good choice for this purpose, and it is clear to everyone that this is why there are various UI libraries.

Here is a React prompt plugin react-toastify, which is a small and customizable library, the following is an official example:

The usage is as follows:

import { ToastContainer, toast } from 'react-toastify' import 'react-toastify/dist/ReactToastify.css' toast.configure({ autoClose: 2000, draggable: false, position: toast.POSITION.TOP_LEFT }) const notify = () => toast('Wow so easy ! ') const App = () => ( Notify ! )

Step by step:

Import the library itself first, but it is important to import the required CSS later.

Then configure toast, autoClose means how long toast will disappear automatically.

Toast can be made to appear by using the toast() function.

Cooler features:

We can also put JSX in toast:

const notify = () => toast(Big Text)

AutoClose can be replaced with false, so it never closes automatically.

3. react-contextmenu

It's hard to imagine an app without context menus, which is unusual on websites. This is no longer because more and more Web apps are approaching real desktop apps, which often already offer similar good performance and many features that we never expected years ago.

One of these features is user evaluation of right-clicks, which is increasingly used on websites. Of course, those are more complex controls with many UI elements.

Often used to display so-called context menus, there is a very handy React.js library for this purpose. The usage is as follows:

import React from 'react' import { ContextMenu, MenuItem, ContextMenuTrigger } from 'react-contextmenu' const App = () => ( {/* ID for every instance must be individual */}

Right click on me!

alert('first ')}> 1. Item alert('second')}> 2. Item ) export default App

is the component we need to right-click to switch menus. The menu itself is defined in the wrapper. For each item, there is a component that we can give an onClick event to handle our user input.

4. react-lazy-load-image-component

It takes a while to display a lot of images on our website. Often, loaded and popping images can lead to an unpleasant user experience with the UI, and of course we want to avoid that.

A powerful library that optimizes all functions related to images for users is response-lazy-load-image-component. Not only can we create a good blur effect, like my example below, to bridge the loaded image, but we can also delay the loaded image. This can be seen in the official example below:

5. react-onclickoutside

An important rule of user interface design is to carefully evaluate as much user input as possible. Everyone should be aware of this, but sometimes it can be difficult to implement something like this into code.

One conceivable example is a menu folded by the user. If you want to turn it off again, 90% of users tend to simply click on the site's dead zones (i.e. elements that don't react on their own). On almost all professional websites, this is exactly the same. To close a menu, simply click next to it again instead of switching directly on it.

There is a library for this type of operation called response-on clickoutside, which allows us to handle click events outside of the actual element.

In the example below, you can see how we implement this for a simple h2 and button. Console.log is output only when you click anything other than these two. The function handling this event must call handleClickOutside.

import React, { Component } from 'react' import onClickOutside from 'react-onclickoutside' class App extends Component { handleClickOutside = evt => { console.log('You clicked outside! ') } render() { return ( Click outside! Don't click me! ) } } export default onClickOutside(App) Thank you for reading, the above is the content of "what are the excellent React.js libraries", after learning this article, I believe that everyone has a deeper understanding of what are the excellent React.js libraries, and the specific use needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

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.