EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

React Components Libraries

By Priya PedamkarPriya Pedamkar

Home » Software Development » Software Development Tutorials » React Native Tutorial » React Components Libraries

React Component Liabraries

Definition of 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 are made give us Microsoft office like views. All these libraries 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 discussed 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 need to show a button, footer or header we use these packages library in all these projects.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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

Top 10 React Component Library

Let us discuss some important 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. Please follow the example below along with html output for code. It has some commonly used components they are given below.

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:

React Components Libraries-1.1

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

Popular Course in this category
React JS Redux Training (1 Course, 5 Projects)1 Online Courses | 5 Hands-on Projects | 18+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (5,487 ratings)
Course Price

View Course

Related Courses

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.

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.

<DatePicker />

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”.

<Icon type="step-backward" />

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. See the below example for a basic understanding of it.

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

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.

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

There 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

<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 see below.

  • npm install @material-ui/core
  • By including script path and CSS path into script and link section like

<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. I suggest 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. See the below example of an image for loading circular design.

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 along with the significance of this library during developing react applications. 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

React JS Redux Training (1 Course, 4 Projects)

1 Online Courses

5 Hands-on Projects

18+ Hours

Verifiable Certificate of Completion

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
React Native Tutorial
  • Basic
    • What is React Native?
    • React Versions
    • React Constructor
    • React Native Architecture
    • React Native Libraries
    • React Components Libraries
    • React Native Components
    • React Component Library
    • React Component Lifecycle
    • React Native Framework
    • React Higher Order Component
    • React Ternary Operator
    • React Native Charts
    • React Native Layout
    • React Native Grid
    • React Native Fetch
    • React Native Modal
    • React Native SVG
    • Button in React Native
    • React List Components
    • React Native Element
    • React Native FlatList
    • React Native SectionList
    • react native dropdown
    • React Native Menu
    • React Native State
    • React State Management
    • React Native Tabs
    • React Native Tab Bar
    • React Format
    • React-Native Switch
    • React Native Firebase
    • React Native Flexbox
    • React Native StatusBar
    • React Native ScrollView
    • React Native ListView
    • React Native TextInput
    • React Native Table
    • React-Native Border Style
    • React Native Search Bar
    • React-Native StyleSheet
    • React Native Vector Icons
    • React Native Login Screen
    • React Native Splash Screen
    • React Native Image Picker
    • React Native Navigation
    • React Native Swift
    • React Controlled Input
    • React Fragment
    • React Native Color
    • React Portals
    • React Refs
    • React shouldComponentUpdate()
    • React ComponentDidMount()
    • React componentWillUpdate()
    • React Native Orientation
    • React Native Animation
    • React Native Form
    • React Props
    • React Native Linear Gradient
    • React Native AsyncStorage
    • React Error Boundaries
    • React Native Progress Bar
    • React-Native Calendar
    • React Native Linking
    • React Native DatePicker
    • React Native Image
    • React Native Drawer
    • React Native Drawer Navigation
    • React Native Fonts
    • React Native Overlay
    • React Native OneSignal
    • React Native Template
    • React Native Router
    • React Router Transition
    • React Dispatcher
    • React Native Redux
    • React JSX
    • React native keyboardavoidingview
    • React Native Permissions
    • React Redux Connect
    • React Native Material
    • React Native Gesture Handler
    • React Native Theme
    • React Native Accessibility
    • React Native Justify Content
    • MobX React Native
    • React Native Authentication
    • React Native UUID
    • React Native Geolocation
    • React Native Debugger
    • React Native Carousel
    • React Native Local Storage
    • React Native TypeScript
    • React Bootstrap
    • React Native SQLite
    • React Native Interview Questions
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - React JS Redux Training (1 Course, 4 Projects) Learn More