React Components Libraries

Introduction to React Components Libraries

The following article provides an outline for React Components Libraries. React component libraries can be either used by NPM or by using CDN. Every react component library developed by community or by us is for some specific purpose, some libraries made to handle a huge amount of data from the server for representing data to end user in tabular format, some libraries are made to give us beautiful icons, some libraries give us Microsoft office like views. All these libraries are made in such a way that we need to write minimum code for HTML, we only need to pass a parameter for design what we want.

Explanation of React Components Libraries

As we seen in the introduction the react component library is a library that can be used in any project. So, for example, suppose we are having 3 separate projects and we want to keep a few things like button, header, and footer to look the same in all 3 projects, then, in that case, we will create a react component library and publish it to NPM(node package manager). Whenever any project needs to show a button, footer or header we use these packages library in all these projects.

There are many available react libraries that we can use in our project, this library was developed by others and published as open sources.

Top 10 React Component Library

Given below are the top 10 react component library:

1. Rebass

Rebass has many components that we can use for designing and developing any components. Any library component looks similar to that of any general components, the only difference is that they are imported from the library instead of from the existing folder. Rebass has many library components, let us discuss one of them.

We are going to use a component called “Flex” it will design container which can contain all required parameters. Flex container takes various attributes as input and produced HTML design accordingly. All these attributes will go to another parent container which is written inside the library. Let us take the example below, we are passing align-items, px, py, bg and button, heading. Actual HTML design for these attributes is written inside the library component which will return valid html design for it. Rebass gives a lot more components we need to learn our requirement and accordingly we need to pass attribute to it. It will give us html design. The main advantage here is we do not have to write HTML again and again, also one exact design for all the projects will be defined in the library.

Follow the example below along with html output for code:

It has some commonly used components:

a. Flex

It will create responsive and flexible layout components, for example, if you want to show two boxes parally with different 2:6 ratio than see the example below.

Code:

<Flex>
<Box
p={4}
width={1/6}
color='black'
bg='primary'>
box1
</Box>
<Box
p={4}
width={1/2}
color='black'
bg='secondary'>
box2
</Box>
</Flex>

Output:

We have many more components like Flex, for example, Box, Slider, radio, and for various input boxes.

2. Ant-Design

In the above we learn a very basic design for the Rebass component library, here Ant-design gives us a complete and flexible design. Ant-design has 50 component library. With the help of Ant-Design, one can design and develop a full-fledged application. We can discuss some of the important and mostly used components of Ant-Design.

a. DatePicker

Date picker provides a very beautiful way to display date format, it gives us the ability to show date and year with a lot more customizations features. A very simple format is given below you can pass various parameters to this attribute.

Code:

<DatePicker />

b. Icon

You have seen various icons like an icon of download, the icon for upload and icon for next or previous, etc. Ant-Design gives us various icons. If we go to write HTML for these icons it will take time and even that may not be that much precise. In the below code we only defined the type of the icon and we will get a respective icon. For example, if we want to create a twitter icon than we just have to define type=”twitter”, similarly if we want to have a Windows icon we need to pass type=”windows”.

Code:

<Icon type="step-backward" />

c. Dropdown

You have seen in HTML select and options, to create a dropdown, but these dropdown created with the HTML was not that much of interactive, or to make them interactive we need to write a lot of css and design. With the help of Ant-Design, we can just use the component called <Dropdown> and we can pass parameters about how the dropdown will open and, how it will look like and we can specify any text name for each drop-down as option object.

Code:

<Dropdown overlay={menu} placement="position where dropdown will open like right left and center etc">
<Button>button</Button>
</Dropdown>

d. Button

You must have heard about button in HTML, but have ever created any button for search, for delete, for upload, for download. To create these buttons using any plain HTML we need a lot of HTML coding, but here with the help of the Ant-Design components library we just have to define the name of icon=”button type what we want”. For example, if we want to create an upload button we can simply pass icon=”upload”. See the below example. Remember any button performs business logic on clicking on it. So end-user should be able to understand the purpose of buttons with button looks.

Code:

<Button type="primary" shape="circle" icon="download" size={size} />

There are many more components in the Ant-Design components library, it is around 50 we can go through all and their implementations.

3. React-Bootstrap

React-bootstrap provides various components to design button, dropdown or any HTML based UI components. It is very much similar to any other component. We can use these components in two different ways either with the help of the NPM package or with the help of by including library. Below are ways to include them in any project for implementing. React-bootstrap comes with CSS style and html mixed all together. Because of its beautiful style we can use them to pre-style and for pre-compiled UI.

npm install react-bootstrap bootstrap

Code:

<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin/>(CDN)

4. Material-UI

Material UI is one of the most popular components libraries for react js. It has a lot of components to design and develop our website with the least amount of HTML code. Material UI designed by google and it is totally based on the card, grid-based layouts. It has beautiful responsive animations. If you want to have beautiful and interactive UI components for your web site go with this library.

This package is available on the NPM library we can get it from their or we can use CDN library URL.

npm install @material-ui/core.

By including script path and CSS path into script and link section like.

Code:

<link rel="stylesheet" href="path" />

5. Fabric React

It was developed by Microsoft. So you can understand the importance of it. They made it in such a way that UI will look similar to any Microsoft offices. So anyone wants to have a look and feel of Microsoft like UI than they should go with this Library. If you are developing something where we are going to many logical manipulations and there will be an office-like work and attributes than we should consider this.

6. React Virtualized

This reacts component library is available to react to NPM. It developed basically for tabular and listing rendering. We may think that rendering is a table or list is not that big a deal but it is a big deal. Suppose your UI is going to render thousands of elements at once, in this case, the performance will be a measure issue. React Virtualized has done great work to resolve the issue of performance in case of large data representations.

7. Gestalt

To deal with the problem of miscommunication of developers and designers, they developed Gestalt react component library. According to this library, it gives us many pre-compiled libraries that can solve many of the prototyping of components can be designed easily and can be analyzed.

8. React Spinner

If you have heard about spinner, so this component library is about Spinner only. This component library does not cover everything, it given its focus mainly on the spinner. So any time if you need something spinner like the icon we can use this library.

9. Grommet

If your design contains more sketching and screen reader functionality than we should use this component library. So the main idea behind this component is accessibility. It is also good for theming and responsiveness.

10. Custom Components Library

We can also design and develop our own components library and we can publish them on NPM. You can log in to through the login credentials of NPM on your console command and publish your developed library. Remember we can not publish a duplicate NPM component library. For example, if we will try to develop publish any component with the name of React-bootstrap then it will not allow as it has been published by someone else already.

Recommended Articles

This is a guide to React Components Libraries. Here we discuss the introduction and top 10 react components libraries respectively. You may also look at the following articles to learn more –

1. React Tools
2. React Components
3. React Native Navigation
4. React Router Transition