DEV Community: React Rainbow

Our component development principals.

Maxx Greene — Thu, 28 Jan 2021 18:18:33 +0000

Building a component library it’s not an easy task, notably when it fulfills the purpose of being used by multiple projects and requirements are continually changing. Given these challenges, we have a set of principles that guide us through the process of creating reliable components.‌

API design is foundational: We take this field seriously.

Don’t start writing any code until the specification document is done and evaluated by the team.
Design from restricted API then relax based on valid use cases.
Create a deterministic API that doesn’t allow you to do the same thing in two different ways.
Defer it as long as possible. The best way of reducing the impact of breaking changes is to avoid them in the first place.

Until you have the information necessary, you are just guessing at what is needed and your success is determined largely by luck. I also believe you may be grossly underestimating the costs of speculation. — WayneMack
Generalization process is the key to avoid breaking changes. Avoid generalizing your component too early but keep in mind that the new API shouldn’t compromise generalize when new use cases arrive. I wrote more about this interesting topic here.

First-class Testing: Our components are test infected. There isn’t software improvement without refactoring and there isn’t refactoring without tests.

Internationalization: We design each component with i18n in mind. Any new component or feature has to be able to work fully in different locales.

react-rainbow-components wouldn’t be possible without the support of engineers from around the world. Thus, building a component library with internationalization is a requirement, not a nice to have.

Accessibility: It’s part of our definition of done. It’s a must-have for each component.

Documentation: It’s critical to the success of any project. There is no adoption without good documentation.

I know you have your own set of principles, let us know if ours make sense to you, we are eager to learn from you. Comment below.

Generalization Process applied to API design of UI components.

Maxx Greene — Thu, 28 Jan 2021 18:05:31 +0000

To make a piece of machinery “more general” you have to modify it to be capable of doing something other than what it already does, while making sure it can still do what it does now.

What is Generation Process?

If you search on Google about “Generation Process” one of the first results returned — at least for my Google profile :) — would be the Wikipedia definition.

Basically, the definition describes that given two related concepts A and B, A is a “generalization” of B (equivalent, B is a special case of A) if and only if both of the following hold:

Every instance of concept B is also an instance of concept A.
There are instances of concept A which are not instances of concept B.

The concept might have a more specific meaning in a specialized context(e.g. generalization in learning, generalization in programming).

Generalization in programming

In my early days doing programming with Delphi and later with Java everything was about Object-Oriented Programming(OOP). Back then we read Object-oriented analysis and design with applications and Generalization was tight in our mental model to Inheritance.

The concept of Animal is a generalization of the concept of Dog since every dog is an animal but not every animal is a dog(a cat, for instance).

Here some other examples of Generalization in programming:

Abstract Classes. Abstract classes isolate the common characteristics of their descendants.
Templates. Templates allow functions and classes to be parameterized by type.
Libraries. Placing a piece of code in a library allows it to be used by more than one program.

How we applied it to UI components API design?

A UI component implementation by itself is a Generalization of all the use cases that support when you build it to be reusable in more than one use case or in more than one application. But how is Generation related to API design?

When designing a component API you should defer implementing features as long as possible to avoid making guesses.

Until you have the information necessary, you are just guessing at what is needed and your success is determined largely by luck. I also believe you may be grossly underestimating the costs of speculation. WayneMack.

At some point, you can’t defer anymore a new feature for a component, it’s clear that this feature belongs to component A, then one of the first question to ask ourself is, how the new version of the API won’t compromise the previous use cases.

In other words, if every use case of your component is a special case of your component API, the new API must not conflict with the previous use cases or that will be considered a breaking change or a violation of the generalization process.

Conclusion

There isn't a single receipt for always apply the generalization process on API design. I always try to exercise generalization with the future API of the component by asking: how the new API won’t compromise other use cases we might want to implement in the future?

Ultimately we need to be fine with designs we agreed on, they could be designed to not support certain use cases.

Implementing an Image Gallery using a React Library and Firebase

Andy Montalvo — Thu, 28 Jan 2021 04:30:31 +0000

If you’d prefer to watch rather than read: https://youtu.be/bG7tIR4QS10

Galleries are a popular way of integrating images into a web application. Image galleries let you add photos in rows and columns, allowing you to display more photos in less space while also making it easier for users to browse them.

In this article I will show you how to how to use an Image Gallery in a faster, easiest way, using React rainbow-modules library and Firebase. To accomplish this, you must have a general background in Javascript, React, Node.js, and Yarn.

What you will need

Node.js
Yarn
Your favorite IDE (I will use VSCode)

Add dependencies

For this project, I will use a new create-react-app project. If you want to know more and how to initialize a project, see: https://create-react-app.dev/.
After creating the project we proceed to the installation of the necessary dependencies.

yarn add react-intl react-redux react-router-dom redux redux-form
yarn add @rainbow-modules/app
yarn add @rainbow-modules/storage
yarn add react-rainbow-components
yarn add firebase

After installing the dependencies we are ready to code!

Coding

First of all, we should use the correct configuration to connect a Firebase project with our React application. Create a file named firebase.js inside the src folder where we will save the Firebase project configuration.

import firebase from 'firebase/app';
import 'firebase/storage';
const firebaseConfig = {
    apiKey: 'your apiKey',
    authDomain: 'your authDomain',
    projectId: 'your projectId',
    storageBucket: 'your storageBucket',
    messagingSenderId: 'your messagingSenderId',
    appId: 'your appId',
};
export default firebase.initializeApp(firebaseConfig);

Now that we have our configuration ready, we go to App.js and delete all its content. Now we import the dependencies into it.

import { RainbowFirebaseApp } from '@rainbow-modules/app';
import { ImageGallery } from '@rainbow-modules/storage';
import { Card } from 'react-rainbow-components';
import firebaseApp from './firebase';
import './App.css';

Next, let’s add the following code in the App component:

function App() {
    return (
        <RainbowFirebaseApp app={firebaseApp}>
            <div className="App">
                <Card>
                    <ImageGallery
                        path="/gallery"
                        allowUpload
                        allowDelete
                        onSelect={(imageRef) => {
                            alert(imageRef.name)
                        }}
                    />
                </Card>
            </div>
        </RainbowFirebaseApp>
    );
}
export default App;

With these few lines of code, we already have an image gallery working in our application. As we can see we must add a path prop with the path in the firebase storage where the images will be saved for the gallery to work.

Notice that the allowUpload and allowDelete props enable and disable the image Upload and Delete options. And with the onSelect prop we can execute some actions when a specific image is selected.

Styling

We will also add some simple styles to enhance the web application appearance. Go to the App.css file and remove all its content, and inside it, add the following code:

.App {
   min-height: 100vh;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

Now we save and reload, and we should see something like this:

Conclusion

We have reached the end of our journey, and as a result, we have a very attractive image gallery, ready to use in any React application with a few lines of code.

Using a React Table with Client-Side Pagination

LeandroTorresSicilia — Thu, 28 Jan 2021 03:47:57 +0000

If you’d prefer to watch rather than read:
https://youtu.be/v9E7moqUJ40

Pagination is a simple navigation technique that allows you to divide content into pages. It is very useful when you want to display a large recordset on multiple pages, for example in a table with a huge amount of data.

In this article, I’ll be teaching you how to use a React Table with client-side pagination using react-rainbow-components. To accomplish this tutorial, you must have a general background in React, Node.js, and Yarn.

Project setup

What you will need:

Node.js
Yarn
Your favorite IDE (For this tutorial, I will use VSCode)

Add dependencies

For this project, I will use a new create-react-app project. If you want to know more and how to initialize a project, see: https://create-react-app.dev/.

Once in the root of your project, let’s install react-rainbow-components and react-query:



$ yarn add react-rainbow-components react-query

Once you have your new app with all dependencies installed, we should be ready to code!

Coding

Importing dependencies

Now we will start by importing react-query and react-rainbow-components:



import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
import { Table, Column } from 'react-rainbow-components';
import './App.css';

Creating the service

Create a function that fetches a list with all the countries:



const API_URL = "https://sampleapis.com/countries/api/countries";
const fetchCountries = async () => {
    const result = await fetch(API_URL);
    return result.json();
};

I am using a free API that will return a list with certain information about the countries like name, capital, population, currency, and more.

Countries Component

Now let’s add a Countries component that will render a Table with all the countries returned by the API call:



function Countries() {
    const { isLoading, data } = useQuery(
        "countries",
        fetchCountries,
    );
    return (
        <Table
            className="countries-table"
            keyField="name"
            isLoading={isLoading}
            data={data}
            variant="listview"
        >
            <Column header="Name" field="name" />
            <Column header="Capital" field="capital" />
            <Column header="Population" field="population" />
            <Column header="Currency" field="currency" />
        </Table>
    );
}

To make the call to the API, I used useQuery hook from the react-query package (https://github.com/tannerlinsley/react-query). This hook will manage the fetch for us and return an object with data, isLoading, error, and more. Thus, we avoid the need to maintain the different states of the fetch process. Also, it provides other advantages like caching, updating out-of-date data in the background, performance optimizations, and many more. If you want to know more about react-query visit its documentation https://react-query.tanstack.com/overview.

The react-rainbow-components Table needs a keyField prop which is required, it can be any field in the data that is unique like an id or a key representing the document or the row in the database. In this case, I used the country name which is unique. The Table also receives an isLoading that will render the loading state when it is true and data that is an array of objects with the data to show in the table. The columns are represented as children of the Table, and they receive a header that is a simple string that will show in the column header. Also, receive a field that represents the key in the data that its value will be shown in the column.

App Component

Next, we will add an app component that is exported and it only has the QueryClientProvider wrapper around the Countries component.



const queryClient = new QueryClient();
function App() {
    return (
        <QueryClientProvider client={queryClient}>
            <Countries />
        </QueryClientProvider>
    );
}
export default App;

The QueryClient is used to interact with the cache managed by react-query. By wrapping your application with the QueryClientProvider you can access the QueryClient anywhere in the app.

Styling

Now we will add some simple styles to the Table component:



.countries-table {
    padding: 40px;
    background-color: rgb(244, 246, 249);
    height: 100%;
    min-height: 100vh;
}

When save and reload the page you will see something like:

You can see it and play in this sandbox:

Problems with this solution

Now we have a large table that shows all countries, but this can cause performance issues since we are rendering too many rows on the page, and creating such an amount of DOM elements is costly.
How to solve this? Here is when client-side pagination comes into play. If your collection or table does not have too many records (hundreds or a few thousand), then you can fetch all of them and do client-side pagination as we will do next.

Client-Side pagination

To achieve the client-side pagination, we can use the TableWithBrowserPagination component from the react-rainbow-components library. The only thing you need to do is import it and pass the pageSize prop with the number of records you want to show per page.

Replace the react-rainbow-components Table import line to:



import { TableWithBrowserPagination, Column } from 'react-rainbow-components';

Here we only change Table for TableWithBrowserPagination.

Next, change the Countries component to use the TableWithBrowserPagination:



function Countries(params) {
    const { isLoading, data } = useQuery(
        "countries",
        fetchCountries,
    );
    return (
        <TableWithBrowserPagination
            className="countries-table"
            keyField="name"
            isLoading={isLoading}
            data={data}
            variant="listview"
            pageSize={15}
        >
            <Column header="Name" field="name" />
            <Column header="Capital" field="capital" />
            <Column header="Population" field="population" />
            <Column header="Currency" field="currency" />
        </TableWithBrowserPagination>
    );
}

There were two simple changes in this code. First, we change Table for TableWithBrowserPagination and add a new prop pageSize with the value of 15, which means that it will render only 15 rows per page.

Now we have:

As you can see, there is pagination at the bottom of the page. Now you can move through the different pages. All the data is already loaded, but we only render 15 rows per page. In this way, we avoid the performance issues caused by creating too many DOM elements.

Conclusion

That’s all folks!

Only with a few lines of code, we have used a table with client-side pagination. The main takeaway is that we can achieve a good user experience by simply splitting the data into pages. Not only does it solve the performance issue, but it also gives us a nice way to represent data since showing a table with a large scroll bar can be annoying to the user.

Thanks for reading!

Adding a “DayNight” theme to your app with react-rainbow-components.

Tahimi — Thu, 28 Jan 2021 01:13:38 +0000

If you’d prefer to watch rather than read:
https://youtu.be/Dy0g3nLrFHE

Why Do We Need a DayNight theme?

The DayNight functionality allows your app to easily switch between a dark ⬛ and light ⬜ theme. This has many benefits for your users, increasing usability for people with reduced-vision, and more.

Dark theme reduces the light emitted by device screens while maintaining the minimum color contrast ratios required for readability. The advantages are, it enhances visual ergonomics by reducing eye strain, facilitating screens to adjust according to current light conditions, and providing the comfort of use at night or in dark environments.

Through this article, I will show you how to implement a "DayNight" theme in your application using react-rainbow-components. To accomplish this, you must have a general background in React, Node.js, and Yarn.

Project Settings

What you will need?

Node.js
Yarn
Your favorite IDE (For this tutorial, I will use VSCode)

Adding dependencies

For this project, I will use a new create-react-app project. If you want to know more and how to initialize a project, see: https://create-react-app.dev/

For the app styles, I will use styled-components. I like it because I can write styles with normal CSS syntax while having all the JS power. Once at the root of your project, let's install styled-components. For more information, see https://styled-components.com/

$ yarn add styled-components@4.4.1

Then, let's install react-rainbow-components. For more information, see https://react-rainbow.io/#/GettingStarted.

$ yarn add react-rainbow-components

Once you have your new project with all dependencies installed, we should be ready to code!

Coding

The Skeleton

Now we will begin to build the markup of our application. It consists of a single page that has a sidebar on the left, a group of Tiles on the top, and a list of data.

import { Sidebar, SidebarItem, Card, Table, Column } from 'react-rainbow-components';
function App() {
    return (
            <main>
                <Sidebar>
                    <SidebarItem label="Apps" />
                    <SidebarItem label="Chat" />
                    <SidebarItem label="Settings" />
                </Sidebar>
                <section>
                    <header>
                        <h1>Title</h1>
                    </header>
                    <section>
                        <Card />
                        <Card />
                        <Card />
                        <Card />
                    </section>
                    <Table
                        keyField="id"
                        data={data}
                        variant="listview"
                    >
                        <Column header="Name" field="name" />
                        <Column header="Id"  field="id" />
                        <Column header="Phone" field="phone"/>
                        <Column header="Status"  field="status" />
                    </Table>
                 </section>
             </main>
    );
}

The Application component

Now we will customize the default styles of our application. Since we are using react-rainbow-components we will do this customization through the theme prop of the Application component, which must wrap your entire app.

The property theme will accept an object where you can specify your palette of colors. If you want to see all the properties you can customize with the theme object, see: https://react-rainbow.io/#/Customization.

function App() {
    return (
        <Application theme={themes.light}>
          ...
        </Application>

Create the themes object:

const themes = {
    light: {
        rainbow: {
            palette: {
                brand: '#4dc9cb',
                success: '#98D38C',
                warning: '#F7DB62',
                error: '#f2707a',
            },
        },
    },
};

How style your tags?

In order to use the theme with your custom components or tags, you can use styled-components normally as you would do in other projects, and out of the box, the props will have the theme object with all the custom colors.

import styled from 'styled-components';
export const Container = styled.main`
    background: ${props => props.theme.rainbow.palette.background.secondary};
    height: 100vh;
`;

The page will look like this:

The DayNight theme colors

Now we add the dark colors to the themes object:

const themes = {
    light: {
        rainbow: {
            palette: {
                brand: '#4dc9cb',
                success: '#98D38C',
                warning: '#F7DB62',
                error: '#f2707a',
            },
        },
    },
    dark: {
        rainbow: {
            palette: {
                mainBackground: '#212121',
                brand: '#4dc9cb',
                success: '#98D38C',
                warning: '#F7DB62',
                error: '#f2707a',
            },
         },
    },
};

The DayNight switch button

Next, we will implement the DayNight switch button functionality, so the user can change the theme of the application. We will use the local storage to keep the selected theme, even when the browser tab is closed or refreshed.

Implement the `useLocalTheme` hook

const useLocalTheme = () => {
    const [state, setState] = useState(() => localStorage.getItem('theme') || 'light');
    const setItem = (value) => {
        localStorage.setItem('theme', value);
        setState(value);
    }
    return [state, setItem]
}

With this hook, we encapsulated the logic to interact with the local storage and also used a useState to make the dark/light theme switching reactive. It will return an array with two elements. The first is the state with a string indicating the selected theme, which will be initialized with the value stored in the local storage. If no value is found, then it will fallback to light. The second element is a function that will be used to store the new theme in the local storage and also will update the state to make the application react to the theme change.

Implementing the switch:

Now we will use the useLocalTheme and add the onClick handler to the DayNight button:

function App() {
    const [theme, setTheme] = useLocalTheme();
    const switchIcon = theme === 'light' ? <MoonIcon /> : <SunIcon />;
    const toggleTheme = () => {
        if (theme === 'light') {
            setTheme('dark');
        } else {
            setTheme('light');
        }
    };
    return (
        <Application theme={themes[theme]}>
            ...
            <ButtonIcon
                shaded
                variant="border-filled"
                icon={switchIcon}
                size="large"
                onClick={toggleTheme} />
            ...

Here we added an icon that will render a moon or a sun based on the theme state. Also, we implemented the onClick handler called toggleTheme, which will make the theme switch using the function returned by the useLocalTheme hook.

The page will look like this when the theme is dark:

You can see the whole code and play in this sandbox:
https://codesandbox.io/s/sparkling-wave-rqzr7?file=/src/index.js

Conclusion

As you can see, with those simple implementations, you can have a DayNight theme on your application.

Thanks for reading!

21 React YouTube Channels you should Follow

YulyGP — Tue, 26 Jan 2021 23:49:30 +0000

It’s not necessary to know all the answers, but the channel of who may have it.

As a child, I believed that older people knew all the answers in the world. So you can imagine my frustration when my questions were landing with an IDK answer from my parents or another family member. But one day, my dad gave me a piece of advice I will never forget: You don’t have to know everything. Just have the phone number of those who may have the answers. And gave me the phone number of a library.

I’m recalling this now when a new year is barely starting and I’ve been finding tons of comments about people beginning the journey with a new programming language.

For those that are trying to keep up with React and Javascript and feeling exhausted, please don’t throw it the towel. Grab a cup of coffee (or tea, or a beer — I'm not judging), follow these 21 “phone numbers” (YouTube channels, you know what I mean), and play some videos. You will find what you’re looking for — from inspiration to education. Mastering is about persistence, patience, and have access to the right information. Just keep going!

Fun Fun Function: https://www.youtube.com/c/funfunfunction/featured
Wes Bos: https://www.youtube.com/user/wesbos/featured
FreeCodeCamp: https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ
Traversy Media: https://www.youtube.com/user/TechGuyWeb
Academind: https://www.youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w
The Net Ninja: https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg
Techsith: https://www.youtube.com/user/techSithTube/featured
Pusher: https://www.youtube.com/user/pusherapp/about
The Coding Train: https://www.youtube.com/user/shiffman/featured
Hitesh Choudhary: https://www.youtube.com/user/hiteshitube/featured
LearnCode.academy: http://www.youtube.com/user/learncodeacademy
Dev Coffee: https://www.youtube.com/channel/UCqr-7GDVTsdNBCeufvERYuw
ReactCasts: https://www.youtube.com/channel/UCZkjWyyLvzWeoVWEpRemrDQ
Facebook Developers: https://www.youtube.com/user/FacebookDevelopers
Rally Coding: https://www.youtube.com/channel/UCQCaS3atWyNHEy5PkDXdpNg
Rem Zolotykh: https://www.youtube.com/user/MrRemchi
Codevolution: https://www.youtube.com/c/Codevolution
Ben Awad: https://www.youtube.com/user/99baddawg
Kent C. Dodds: https://www.youtube.com/channel/UCz-BYvuntVRt_VpfR6FKXJw
Programming with Mosh: https://www.youtube.com/user/programmingwithmosh
NodersJS: https://www.youtube.com/channel/UC7tUsO3S7424TMcgSCUOCow/

Hope this will help you. Thanks for reading!

How to make a HOW-TO guide in a few steps

YulyGP — Tue, 26 Jan 2021 23:06:33 +0000

There are tons of great guides, tutorials, and how-to videos out there. So how do you make yours stand out? It seems difficult but not impossible. Take a look at this guide for making a HOW-TO that’ll attract readers and make them want to share your content.

STEP 1. Planning

Pick a topic to write about: Think about a problem you can fix or something you are interested in. Pick a topic that hasn’t been written about too often. Do your homework, do research.
Think about your target audience: Before starting your HOW-TO you should have a specific audience in mind. According to the audience, you can determine the level of detail you’ll need to create it.
Research about the process: Find out how other people do what you want to do. Look online for existing tutorials about the topic and annotate all the steps you think you’ll need. Don’t forget to take notes of all the positive, cool things you notice so you can implement them into your own creation.
Gather the materials you need: For your tutorial, you’ll need to collect all the material and information that you want to include. For example, pictures, code snippets, graphs, links to other resources, etc.

STEP 2. Building it

Create a great title and add an interesting image: Grabbing readers’ attention in the first few seconds is key. Choose a title that clearly describes what the tutorial is about and an attractive image to complement it.
Begin with an Introduction: Introduce the topic in a simple way so your audience clearly understands what you’re talking about, and why this topic will be useful.
Include a list of supplies, tools and/or resources: Before you start to describe the process, you may want to list what the person will need to accomplish the task. Inform your audience about any required knowledge, configuration, or useful resources.
Write instructions in chronological order: Follow a step-by-step approach, keeping in mind the logical sequence of events. Describe each step as clearly and precisely as possible. Use images, code snippets, graphs, short videos to help your readers conceptualize the process.
Conclude with tips, advice, links to other resources: Lead your audience into other resources. Add tips, FAQs, references and all you think will help them to successfully make their task.

STEP 3. Posting

Check again what you create: Be sure to check carefully for spelling and grammar mistakes. It may be helpful to have someone else review it. Ask for feedback.
Test the guide yourself: Follow the step-by-step instructions you created. Look for an obvious step that you might have missed or a step out of order.
Publish your guide: Once you have all the feedback and corrections, it’s time to publish it. You may want to put it on your website, blog, and/or in a publishing platform like Medium, that fits your intended audience. Check that your writing meets any specified guidelines of the site.

Don’t forget to keep an eye on your post reactions and comments. Feedback is always welcome and will help you improve not only what you have done, but also your future work.

I hope you find this guide useful. Notice you can also use it to create a tutorial video. Do you have a great HOW-TO tutorial you’d like to share? Post it in the comments below, and I’ll give you my opinion.

11 Best Websites to Announce Software Products

YulyGP — Tue, 22 Dec 2020 17:07:27 +0000

2020 is coming to an end (Finally!), and I know you are waiting for the right moment to announce that idea you’ve been working on these last months. The start of a new year fits you like a glove. But where?

Internet could be overwhelming sometimes. There are many places to keep up to date and learn from people who are in the same field: LinkedIn, Facebook, Twitter, TikTok (why not?), YouTube, etc. For example, if you’re immersed in the tech environment, working in a SaaS (Software as a Service) company, or even learning a framework like React, YouTube is a good ally. But back to business, what you need is a list of the best websites to announce your software product for the first time. So here you have these 11 websites we’ve compiled for you, hoping these will help you put your ideas into the market and beyond:

Reddit- Entrepreneur: https://www.reddit.com/r/Entrepreneur/
Reddit-SideProject: https://www.reddit.com/r/SideProject/
Hacker News: https://news.ycombinator.com/
Product Hunt: https://www.producthunt.com/
Betalist: https://betalist.com/
AngelList: https://angel.co/
Beta Bound: https://www.betabound.com/
BetaTesting: https://betatesting.com/
Feed My App: http://uk.feedmyapp.com/
Index.co: https://index.co/
Launching Next: https://www.launchingnext.com/

In case you don’t have a new software development project yet or are starting a new one right now, check out the benefits of doing it with a React component library.

Let me know your thoughts and which ones fit you. Good luck launching!

Should you build your own React component library?

YulyGP — Wed, 18 Nov 2020 17:37:17 +0000

4 Advantages of Using a React Component Library, Three Musketeers and a D’Artagnan

It seems that nowadays every software company is creating its own component libraries. Why? Well, technology companies around the world have realized the only way to scale their software solution is by building reusable components.

Most businesses have to develop multiple projects, and in doing so, usually need to follow the same design guidelines. By way of example, Google offers several products such as Gmail, Google Docs, Google Analytics, and several others. You’ll notice that these projects all have similar user interfaces, that’s because Google leverages their own component library to cut down on development time and provide a consistent experience for their users across their applications.

However, for smaller companies that lack the resources of Google, building a reusable UI component library can be timely and cost prohibitive. Big companies are developing component libraries because they can afford to have what is called “platform teams” that support other developers inside the company by building things like component libraries so they can build software faster.

So if you’re a small or medium-sized business or especially a new startup, you’ll likely not have the resources available to build your own component library. Fortunately, there are several reliable and open source component libraries that already exist and most importantly are free! By using an open source library, smaller companies are able to take full advantage of the benefits of utilizing a component library without worrying about the cost or time of building their own.

To better understand the advantages of using an open source library let’s take a look at some key benefits of using them.

Benefits

Ready To Use: a component library is a robust set of ready-made UI components such as badges, buttons, tables, and so on. With a simple import, the library is ready to be used. Often, you just have to copy and paste code snippets to make it work.
Time Efficient: you can mix and match the existing components to create your project so you can save time by not building everything from the beginning. It also reduces decision-making time from not having to design components APIs that work for all your use cases.
Developer Friendly: components are carefully designed, well-documented, and well-organized by professionals. This will help you easily understand what you need to do, and shorten development and maintenance time. Plus if you’re a developer with not much design knowledge, you can effortlessly create elegant layouts and provide a nice UX for your users.
Consistency: adopting a component library will give you a consistent UI and UX across your project. Meaning you don’t have to worry about your project having different designers working at the same time with inconsistent designs. Everything will remain uniform.

Not to mention, that since these libraries are open source they are free! Meaning no need to get buy in or invest in leveraging these libraries.

How to evaluate component libraries

Like any other tool, open-sourced component libraries aren’t perfect and it won’t suit every use case you may have.
Based on my own experience, most of the gaps in open source component libraries are related to customization, accessibility, and testing.

So you should consider the following while evaluating component libraries:

Does your project demand a lot of customization?
Are you working on a government project that requires by law accessibility compliance?
How well-tested are the components in the library you selected?

While you analyze your project’s needs be sure to check out these top 3 component libraries, plus one that has been getting noticed lately by the community.

Three Musketeers on the market… and D’Artagnan

If you decide that a component library is a good fit for your project, here are 3 of the most popular and useful React component libraries, frequently mentioned in tech blogs and platforms like medium.com and dev.to:

Material-UI
Ant Design
Semantic UI

These libraries have a good reputation in the community and will help you build your React project with a great UI. They have tons of stars on GitHub, a bunch of high-quality components out of the box, flexibility in customizing components, as well as some other great features. They’re big, they’re good, and have been in the market for some time, but what about D’Artagnan?

I strongly believe that we have to make room for new things, like when the old trio of musketeers accepted a new member in the iconic Alexandre Dumas’ novel. I believe, in this case, D’Artagnan is Rainbow UI.

Rainbow UI is an open source React component library designed for enterprise-level products. Its features include internationalization, accessibility, and most importantly, they eliminate frustrating breaking changes.

Rainbow UI offers over 90 components, which is more than Material, Semantic, and Ant Design. Providing you greater options and customization for your project.

Rainbow UI also includes several modules and interactive examples so you can build a better product, faster. With the modules and interactive examples, this allows you to be ahead of the game in comparison to traditional options like our Three Musketeers listed above.

For all my latest projects, we’ve used Rainbow UI and aren’t planning on switching back anytime soon. Ultimately, you can’t be wrong in any of the options listed above.

Tell us in the comment section below what’s important while you’re evaluating component libraries and which library you typically utilize.

DEV Community: React Rainbow

Our component development principals.

Generalization Process applied to API design of UI components.

What is Generation Process?

Generalization in programming

How we applied it to UI components API design?

Conclusion

Implementing an Image Gallery using a React Library and Firebase

What you will need

Add dependencies

Coding

Styling

Conclusion

Using a React Table with Client-Side Pagination

Project setup

What you will need:

Add dependencies

Coding

Importing dependencies

Creating the service

Countries Component

App Component

Styling

Problems with this solution

Client-Side pagination

Conclusion

Adding a “DayNight” theme to your app with react-rainbow-components.

Why Do We Need a DayNight theme?

Project Settings

What you will need?

Adding dependencies

Coding

The Skeleton

The Application component

How style your tags?

The DayNight theme colors

The DayNight switch button

Implement the useLocalTheme hook

Implementing the switch:

Conclusion

21 React YouTube Channels you should Follow

How to make a HOW-TO guide in a few steps

STEP 1. Planning

STEP 2. Building it

STEP 3. Posting

11 Best Websites to Announce Software Products

Should you build your own React component library?

4 Advantages of Using a React Component Library, Three Musketeers and a D’Artagnan

Benefits

How to evaluate component libraries

Three Musketeers on the market… and D’Artagnan

Implement the `useLocalTheme` hook