Awesome Open Source React Projects and Libraries to Use in 2022
Exciting starter kits, user interface libraries, and more
Open source projects are a great way to get inspired — as well as to learn the best practices for frameworks like React. Undoubtedly, React is among the top frontend frameworks.
What Constitutes an Awesome Open Source Project?
You may be interested in open source projects for various reasons — you may want to attract people to use your platform, build your own personal brand, attract employers, or just use open source projects as a starting point for your own work. In any case, it’s important for us to know and understand what makes an open source project good or awesome.
Adding even a small feature to a project requires you to understand how the whole project/library/plugin operates. Therefore, point one: The project should have good documentation.
All dependencies should be well described. Popular and good quality open source solutions always have good documentation. This can be a great sign of the quality and support one can expect from the community.
The third thing worth paying attention to is whether the work is well organized with respect to its issues. Look at the issues in general. How many critical issues are there in the project? How quickly do they close?
Another thing is looking at how the rules of committing are documented. Imagine the situation: You found a bug, and you made a big effort to fix it. It caused you some pain, but your patch isn’t included in the commit because the rules weren’t clear enough.
How To Choose an Open Source Project to Contribute to, Learn From, or Use as a Starting Point or Dependency for Your Work
Look into the community. It’s one of the largest resources available for an open source project. An active community always helps move the project forward. A good open source software always has a community of developers or active users who write code, detect bugs, and provide support for other users.
Choosing software with a sound community support will always help you in the future whenever you’re stuck in fixing bugs. Good community support will always help you fix any problems that occur in the future.
When looking at projects on GitHub, look for people/packages with many stars, watchers, forks, contributors, etc. These are visible clues of how much the community cares about that person, project, or action.
Remember that the number of commits, issues, and pull requests (PRs) can be a signal of investment and commitment to a project. Google Trends can also be a good measure of the level of interest in projects or technologies.
If you’re interested in contributing to the community and improving your profile/resume, choose a project that’ll give you new knowledge. Don’t choose a product that’s too easy to change or debug. Find a project you think will survive for long enough to keep what you’ve invested into it. You also need to choose a project that’ll be useful to others.
You’d benefit more if you were a part of the project from the beginning so you can appreciate the full life cycle of a project: the idea, prototyping, design, testing, and implementation.
A good way to find a project to invest your knowledge and time into is to ask other people. There’s a good chance you’ll get a good recommendation. Find a community that’ll help you grow and communicate politely.
You can also contribute to something you use regularly or will use in the future. You might pay attention to the project your company uses.
The other approach is to create a new project of your own. If your goal is just to learn how to use GitHub or just to gain some basic efficiency in programming, a self-initiated project will do that.
You could make something small and simple just to exercise your open source experience, or you could put a lot of time into something larger and try to create something that involves other contributors. Don’t be afraid to initiate your own open source projects.
Let’s now take a look at some of the best open source React projects.
Some of the Best React Starter Kits
Starter kits are templates that can be used for scaffolding your app. They’re recommended tool chains available when starting a new React app and provide a layer of abstraction to aid in common tasks.
In most real world development, developers start by scaffolding one of the React starter kits and modify it to create their apps/websites. Let’s now look at some of the best React starter kits.
Create React App
Create React App is a starter kit that helps to start a React website without learning and configuring many build tools. You don’t need to rebuild the whole application when developing. Instant reloads do all the work for you.
Under the hood, Create React App uses webpack, Babel, ESLint, and other projects. If you need an advanced configuration, you can exit Create React App and edit the config files directly.
This is the most popular React project and starter tool across the React ecosystem. It’s supported by Facebook Open Source. To scaffold your app using this template, all you need to do is install the latest Node.js and run npx create-react-app.
Next.js
Next.js, created by Vercel, is an open source React frontend development web framework that enables functionality, such as server-side rendering and generating static websites for React-based web applications. It’s a production-ready framework that allows developers to quickly create static and dynamic JAMstack websites and is used widely by many large companies.
Next.js is one of several recommended tool chains available when starting a new React app — all of which provide a layer of abstraction to aid in common tasks.
“Next.js is the React Framework for Production.
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.”
Gatsby
Gatsby.js is a free open source modern-site generator for React. Websites built on Gatsby are fully functional React apps so you can create dynamic web apps, from blogs to e-commerce sites and user dashboards. Gatsby sites are built using React and GraphQL.
The product can pull data from any source, whether it’s Markdown files, headless CMS (like Contentful or WordPress), or a REST or GraphQL API. Gatsby sites don’t require servers, so you can host your entire site on a CDN for a fraction of the cost of a server-rendered site.
Some of the Best Open Source React Toolkits
Unstated
Unstated is designed to build on top of the patterns already set out by React components and context.
Unstated builds upon three main ideas/components:
- The container is a very simple class, made to look just like React. It’s a component with only state-related bits.
- Subscribe is how you pass the state from the container to your component. This will behave the same way the state behaves, i.e., when state changes, the components rerender, but you can also call methods on the container.
- The provider is where we’ll store all of our instances internally. The unstated provider works similarly to the Redux or Apollo Provider: It uses context in a smooth way to extract the API into something very consumable by our components.
This library is the evolution of state management. It reduces complexity and stays within the boundaries of React. If you understand how context works, you’ll understand how this library works.
React Bootstrap
React Bootstrap replaces Bootstrap’s JavaScript. Each component has been built from scratch as a true React component, without unwanted dependencies like jQuery.
By relying entirely on the Bootstrap style sheet, React ootstrap simply works with the thousands of Bootstrap themes you already love. Each component is implemented with accessibility in mind. The result is a set of accessible-by-default components over what’s already possible from plain Bootstrap.
React Bootstrap is a complete reimplementation of the Bootstrap components using React. It has no dependency on either Bootstrap.js or jQuery.
WatermelonDB
WatermelonDB is a high-performance reactive database for powerful React and React Native apps. It’s optimized for building complex applications in React, and the number one goal is real-world performance.
In WatermelonDB, nothing is loaded unless requested. And since all querying is performed directly on the rock-solid SQLite database on a separate native thread, most queries resolve instantly.
But unlike using SQLite directly, Watermelon is fully observable. So whenever you change a record, any UI that depends on it will automatically rerender. For example, completing a task in a to-do app will rerender the task component, the list (to reorder), and all relevant task counters.
Some of the Best Open Source React User Interface Libraries
React Select
React Select is a select control for React, initially built for use in Keystone.js.
React Select is funded by Thinkmill and Atlassian. It represents a new approach to developing powerful React components that work out of the box while being extremely customizable.
Features include:
- Flexible approach to data with customizable functions
- Extensible styling API with emotion
- Component-injection API for complete control over the UI behavior
- Controllable state props and modular architecture
- Long-requested features, like option groups, portal support, animation
The framework is very easy to customize.
Evergreen
Evergreen is a UI framework built on top of React by Segment.com.
Evergreen contains a set of polished React components that work out of the box. Those components are built on top of a React UI Primitive for endless composability. Evergreen features a UI design language for enterprise-grade web applications.
Core beliefs of Evergreen:
- Evergreen is built on the belief that you can never predict all future requirements, only prepare for them. Instead of creating fixed configurations that work today, Evergreen promotes building systems that anticipate new and changing design requirements.
- Evergreen is built on the belief that things should work out of the box with smart defaults and offer full control when needed. For example, Evergreen implements most components on top of a Box primitive which allows for a lot of customization.
- Evergreen is built on the belief that using Evergreen and contributing to Evergreen should be a pleasant experience. We prioritize documentation and all the tools for solid developer experience. We advocate respect and inclusivity in our writings and interactions.
React Spring
React Spring is a spring-physics based animation library. This library represents a modern approach to animation. It inherits animated powerful interpolations and performance, as well as react-motion ease of use.
React Spring is cross-platform; it supports the web, React Native, React Native for Web, and practically any other platform. The size will ultimately depend on your build chain and can decrease with tree shaking. The library comes as an ES module compiled for evergreen browsers.
Material-UI
Material-UI is an open source project that features React components implementing Google’s Material Design. With over 52,000 stars on GitHub, Material-UI is one of the top user interface libraries for React out there.
The real power of Material-UI lies in its flexibility. For example, it gives three different ways to style your components:
- Use a Hook-based API (
makeStyles/useStyles) - Use a styled-components API (
styled(Component)({...stylesObject})) - Use Higher Order Components (
withStyles(styles)(Component))
Ant-design
Ant Design is a React UI library that has dozens of easy-to-use components for building elegant user interfaces. It was created by the Alibaba group. This is the second most popular React UI library. Since it’s an Asian product, its built-in ways of design thinking may not be suitable for European or Western products.
Features:
- Enterprise-class UI designed for web applications
- A set of high-quality React components out of the box
- Written in TypeScript with predictable static types
- Whole package of design resources and development tools
- Internationalization support for dozens of languages
- Powerful theme customization in every detail
Storybook
Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular.
Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.
The product comes with a lot of add-ons for component design, documentation, testing, interactivity and so on. Storybook’s easy-to-use API makes it easy to configure and extend in various ways.
The library was recognized by such companies as Atlassian, Airbnb, and Lyft.
Formik
Formik takes care of the repetitive and annoying stuff — keeping track of values/errors/visited fields, taking care of validation and handling submission — so you don’t have to.
By staying within the core React framework and away from magic, Formik makes debugging, testing, and reasoning forms an easy breeze.
Some of the Best React Apps
We had a glance at some of the best React toolkit and React design libraries, now let’s look at some of the awesome open source React apps.
Spectrum chat
Spectrum is an open-source chat similar to Slack for curating communities. It was developed on top of React, and now is a part of GitHub. Conversations on Spectrum are real-time chats, just like your favorite messaging app. Every conversation gets a unique link to make it easy for people to discover, share, or save for later.
“Spectrum aims to be the best platform to build any kind of community online by combining the best of forums and real-time chat apps. With best-in-class moderation tooling, a single platform for all your communities, threaded conversations by default, community health monitoring, and much more to come we think that we will be able to help more people start and grow the best online communities.” — Spectrum via GitHub
Draft.js
Draft.js is a framework for building rich text editors in React, powered by a universal model and taking over cross-browser differences.
Draft.js makes it easy to build any type of rich text input, whether you’re just looking to support a few inline text styles or building a complex text editor for composing long-form articles.
In Draft.js, everything is customizable — it consists of building blocks so that you have full control over the user interface.
The app fits seamlessly into React applications, covering the details of rendering, selection, and input behavior with a familiar declarative API. The Draft.js model is built with Immutable.js, offering an API with functional state updates and aggressively leveraging data persistence for scalable memory usage.
Parting Words
I hope this article will inspire to use and contribute to open source projects. By no means is this an exhaustive collection of the wonderful open source projects created using React. You may also be interested in React vs Vue in 2021: Which One Should You Use? and Awesome Vue.js Open Source Projects.
Also, checkout our courses on Vue JS
Thank you.
