一个厉害的,强大的表单下拉选择框的库
代表了一种开发功能强大的 react.js 组件的全新方式,这些组件在完全可定制的同时开箱即用。
突出的功能特性
安装:
npm i react-select
示例代码:
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} />
)
React 的拖拽包
一个强大的工具包,能够做出丰富的拖拽页面应用,而且代码具有解耦性。
突出的功能
安装:
npm i react-dnd
示例代码:
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>
)
}
基于 SVG 的强大的组件库,可以轻易地创造骨架式的 加载页面(loading)(有点像 Facebook 的卡片加载)
突出的功能
安装:
npm i react-content-loader
示例代码:
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 MyLoader
企业级用户界面设计语言和React UI库。
突出的功能
安装:
npm i antd
示例代码:
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,
};
}
使用 React构建快速、现代的应用程序和网站
突出的功能
安装:
npm i gatsby-image
示例代码:
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
}
}
}
}
`
可重用的 React 组件将管理您对文档头的所有更改。
采用纯HTML标签并输出纯HTML标签,非常简单,对 React 支持得很好。
特性
安装:
npm i react-helmet
示例代码:
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>
);
}
};
这提供了一个 React 组件来有效地呈现大列表和表格数据,由5个主要组件组成(Grid, List, Table, Masonry, Collection)
突出的功能
安装:
npm i react-virtualized
示例代码:
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'),
);
使用 React 360有助于创造迷人的360虚拟现实体验,该体验延伸到台式机、手机和虚拟现实设备。
突出的功能
安装:
npm i react-threesixty
示例代码:
<ThreeSixtyViewer
image: 'images/example.jpg'
count: 19
perRow: 4
/>