8 React Libraries You Should Try in 2021

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} />
)
copy

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>
  )
}
copy

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 MyLoader
copy

4. 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,
  };
}
copy

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
        }
      }
    }
  }
`
copy

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>
    );
  }
};
copy

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'),
);
copy

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:

<ThreeSixtyViewer
  image: 'images/example.jpg'
  count: 19
  perRow: 4
/>
copy

Tags: html React api npm

Posted by kkibak on Sat, 18 Feb 2023 13:21:34 +0530