React Component Libraries, How You Can Create Your Own AND 19 Libraries to Get You Started

The React logo we know and love.

If you’re reading this there’s a good chance you just started developing in react and you want to make some good looking projects!

OR

You are looking for information on how to create your own. If you are one of those people feel free to scroll to the end where I give instructions on how to do that.

Either way thanks for reading. Let’s take a deep dive into the React libraries that will make your life easier.

Reading the Docs:

Before we dive into the actual libraries themselves let’s talk about the best way to explore the docs. First, each of them has many youtube videos out there that will walk you through how to use them.

But if you don’t want to spend hours watching videos that will learn not nearly as much as you would learn if you were to look at the docs correctly.

HOW TO READ THE DOCS EFFICIENTLY FOR MAXIMUM LEARNING!!!

Before anything, take a look at the introduction, or getting started page. This will give you the packages you need to install in order to have access to all these components. Follow the instructions closely. This will set you up for success.

When I first started coding, I would watch videos and copy the code. I would hopefully learn some things along the way. But it became time consuming and inefficient.

A better way to learn to code is to scan the documentation and maybe look at one or two things you want to implement. A perfect one for most libraries would be a button.

Find the place in the doc where the Button is…

All good React component library documentation should list each components properties (props). Don’t forget, react is big on passing down props. Just like your own components these prewritten components take props and handle them in certain ways. Knowing that, we can hypothesize that there are going to be certain props that will change the way this button looks and acts.

Take a look at the props for the button you are looking to create. Scan them briefly but start trying to get a sense of all the options that you can manipulate.

Once you have a sense of what some of the props this button will be taking, only then would I suggest copy and pasting from one of their examples.

Take note of how each component is being imported. Just like you import your own components, you will import components the same way.

If you don’t understand what a prop is doing is just take it out and see what changes. Then look at the docs of course.

INTO THE LAND OF STYLE

Many of component libraries have their own built in colors that you can import similar to how you would a component. Usually, they use the useStyles hook in a way that uses their own prebuilt function to create styles. For Material UI, you would import their makeStyles function.

import { makeStyles } from ‘@material-ui/core/styles’;

This is deeper territory than I would like to go in this blog but creating your own custom styles will help you give these components your own spin.

My suggestion is before starting to change styles and themes, build a few features to get used to using the components. Then dive into the docs on how to style a component.

If you’ve used CSS you are used to the “text-align: center” format. Inline styling in HTML is done the same way. In JSX however, take note that you are passing and object into the style component.

It would look something like this:

style={{textAlign: "center"}}

Since we need to switch to Javascript to pass in an object, we wrap our object in curly braces. Knowing this, you can understand that your component’s libraries equivalent to makeStyles is going to be an object. Also take note that your ‘text-align’ is now camel case. Take a look at the react docs to see what syntax is used for each style element you would like to change.

Knowing all of this you can play with the key value pairs you will see in your react libraries useStyle function.

SOME OF THE MOST USED REACT COMPONENT LIBRARIES

Without Further Ado, here are some Libraries to get you started:

Material UI — https://material-ui.com/

• One of the most popular design kits, with the ability to customize each components.

Rebass — https://rebassjs.org/

• Library that uses Flexbox with the ability to create themes.

Ant-design Components — https://ant.design/docs/react/introduce

• Documentation has a sandbox. Very functional components such as calendars.

React Bootstrap — https://react-bootstrap.github.io/

• Based on the same Bootstrap you may know from developing in Vanilla Javascript.

React Spinner — https://www.npmjs.com/package/react-spinners

• Amazing gallery of spinner elements you can use while your pages are loading.

Semantic UI — https://semantic-ui.com/

• Wonderful documentation and beautiful clean design.

Grommet — https://v2.grommet.io/

• A design system for building mobile apps.

Gestalt — https://madewithreact.com/gestalt-react-ui-components/

• Used by Pinterest

Fabric React — https://react-fabric.github.io/#/

Onsen UI — https://onsen.io/v2/guide/react/

React Virtualized — https://bvaughn.github.io/react-virtualized/#/components/Collection

• Super functional components with a corporate look.

Blueprint — https://blueprintjs.com/

React Desktop — https://reactdesktop.js.org/

• For building Mac and Windows Desktop apps.

Evergreen UI — https://evergreen.segment.com/

• Beautiful site and beautiful components.

Chakra UI — https://chakra-ui.com/

• Many components with great documentation.

Material Kit — https://www.creative-tim.com/product/material-kit

• A bootstrap UI Kit.

React Admin — https://marmelab.com/react-admin/

• Used for building B2B applications.

Shards React — https://designrevision.com/downloads/shards-react/

Argon — https://www.creative-tim.com/product/argon-dashboard-react

Browse through the docs and get a sense of what library might be a good fit for your projects. If you have your own please link them in the comments!

How to Set Up Your Own Component Library

So you have some ideas for components that you think might be nice to package up and use on projects or ship out the world? Well, here’s how to quickly jump in and create your own components without creating an entire React app.

The secret is using the create-react-library package.

To get started:

npx create-react-library <name>

In the name slot, pick whatever name you want for your library.

Unlike create-react-app, create-react-library will ask you some questions about how you want to create your library. Answer these based on how you want it to set up your library and then let it do it’s magic.

Build your components in the src folder and test them in the example folder (which mirrors a tiny little react app).

When you’re done building those beautiful components simply send that thing up to npm using:

npm publish

This is just a quick way to get started creating react component libraries. You are now ready to start your journey!

For more details on this head to: https://www.npmjs.com/package/create-react-library

Thank you for taking a look at my blog! Please follow me on Twitter: @thedrewprint !!! If this blog was useful to you please give me a clap and share!