1. react-select
A powerful, powerful form drop-down selection box library
Represents a whole new way of developing powerful react.js components that work out of the box while being fully customizable.
Outstanding Features
- Flexible data processing methods with customizable functions.
- Flexible combination of emotion library (a powerful library of css in js).
- Component injection API for full control over UI behavior.
- Option groups, portal support, animations, and more.
Install:
npm i react-select
Sample code:
import React, { Component } from 'react'
import Select from 'react-select'
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
const MyComponent = () => (
<Select options={options} />
)2. react-dnd
Drag and drop package for React
A powerful toolkit that can make rich drag-and-drop page applications, and the code is decoupled.
outstanding features
- Great for apps like Trello (a tool for managing tasks) and Storify, where dragging is responsible for transferring data between different parts of the app.
- Built on HTML5 drag and drop API.
Install:
npm i react-dnd
Sample code:
import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'
/**
* Your Component
*/
export default function Card({ isDragging, text }) {
const [{ opacity }, dragRef] = useDrag({
item: { type: ItemTypes.CARD, text },
collect: (monitor) => ({
opacity: monitor.isDragging() ? 0.5 : 1
})
})
return (
<div ref={dragRef} style={{ opacity }}>
{text}
</div>
)
}3. react-content-loader
A powerful component library based on SVG, you can easily create a skeleton loading page (loading) (a bit like Facebook's card loading)
outstanding features
- Lots of plugins: There are many presets available.
- DIY: You can easily create your own loader with create-content-loader.
- React Native Support: Same API with the same great features.
- Easy: less than 2KB package and zero dependencies
Install:
npm i react-content-loader
Sample code:
import React from "react"
import ContentLoader from "react-content-loader"
const MyLoader = (props) => (
<ContentLoader
speed={2}
width={400}
height={160}
viewBox="0 0 400 160"
backgroundColor="#f3f3f3"
foregroundColor="#ecebeb"
{...props}
>
<rect x="48" y="8" rx="3" ry="3" width="88" height="6" />
<rect x="48" y="26" rx="3" ry="3" width="52" height="6" />
<rect x="0" y="56" rx="3" ry="3" width="410" height="6" />
<rect x="0" y="72" rx="3" ry="3" width="380" height="6" />
<rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
<circle cx="20" cy="20" r="20" />
</ContentLoader>
)
export default MyLoader4. antd
Enterprise-grade user interface design language and React UI library.
outstanding features
- Written in TypeScript
- A complete set of design resources and development tools.
- Powerful theme customization in every detail.
Install:
npm i antd
Sample code:
import { useRequest } from 'umi';
import { queryProductList } from '@/services/product';
export default function useProductList(params: { pageSize: number; current: number }) {
const msg = useRequest(() => queryUserList(params));
const deleteProducts = async (id: string) => {
try {
await removeProducts(id);
message.success('success');
msg.run();
} catch (error) {
message.error('fail');
}
};
return {
dataSource: msg.data,
reload: msg.run,
loading: msg.loading,
deleteProducts,
};
}5. gatsby-image
Build fast, modern apps and websites with React
outstanding features
- Hosting at a fraction of the cost: Gatsby sites don't require a server, so you can host your entire site on a CDN at a fraction of the cost of a server-rendered site.
- Locate data from anywhere: Extract data from any data source (Markdown files, headless CMS like Contentful or WordPress and REST API).
- Beyond Static Sites: Benefits of a static website without any limitations.
Install:
npm i gatsby-image
Sample code:
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
export default ({ data }) => (
<div>
<h1>Hello gatsby-image</h1>
<Img fixed={data.file.childImageSharp.fixed} />
</div>
)
export const query = graphql`
query {
file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
childImageSharp {
# Specify the image processing specifications right in the query.
# Makes it trivial to update as your page's design changes.
fixed(width: 125, height: 125) {
...GatsbyImageSharpFixed
}
}
}
}
`6. react-helmet
Reusable React components will manage all your changes to the document header.
It is very simple to take plain HTML tags and output plain HTML tags, and it supports React very well.
characteristic
- All valid tags are supported: title, base, meta, link, etc.
- Support for server-side rendering.
- Nested components override repeated head changes.
Install:
npm i react-helmet
Sample code:
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://mysite.com/example" />
</Helmet>
...
</div>
);
}
};7. react-virtualized
This provides a React component to efficiently render large lists and tabular data, consisting of 5 main components (Grid, List, Table, Masonry, Collection)
outstanding features
- Improved performance due to limiting the number of calls to render.
- Provide many HOC components, such as (AutoSizer, MultiGrid, etc)
Install:
npm i react-virtualized
Sample code:
import React from 'react';
import ReactDOM from 'react-dom';
import {Column, Table} from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once
// Table data as an array of objects
const list = [
{name: 'Brian Vaughn', description: 'Software engineer'},
// And so on...
];
// Render your table
ReactDOM.render(
<Table
width={300}
height={300}
headerHeight={20}
rowHeight={30}
rowCount={list.length}
rowGetter={({index}) => list[index]}>
<Column label="Name" dataKey="name" width={100} />
<Column width={200} label="Description" dataKey="description" />
</Table>,
document.getElementById('example'),
);8. react-threesixty
Using React 360 helps create captivating 360 VR experiences that extend to desktops, mobile phones, and VR devices.
outstanding features
- Simplifies the creation of complex 360 and VR user interfaces.
Install:
npm i react-threesixty
Sample code:
copy<ThreeSixtyViewer image: 'images/example.jpg' count: 19 perRow: 4 />