Building UI Components With React

Articles & Tutorials

The ultimate guide to drag and drop in React (blog.logrocket.com)
Sep 20, 2019
Drag and drop UI has become an integral part of most modern applications. It provides richness in UI without comprising the UX.
  • Paramanantham Harrison
Adding spinners and notifications to your React app (blog.logrocket.com)
Sep 04, 2019
To make your web projects more interactive and user-friendly, you may find you want to add some additional features like notifications, or a spinner that shows a loading state.
  • Nur Islam
How I Created My Own React Spinners Library (dev.to)
Sep 03, 2019
I could have used an existing react spinners library, but instead, I decided to use this chance to learn how to build my own spinners and my own React component library. So, in this post, I’ll show you my library, and an example of how to use a spinner.
  • Josh Kuttler
react-notifications-component, a Powerful React Notifications Library (alligator.io)
Sep 01, 2019
In this article, we’ll look at the new release of react-notifications-component (v2.0.6). It’s a React component that provides you with a fully-featured notification system that will save you the time & effort of building one yourself.
  • William Le
Draggin’ and Droppin’ in React (css-tricks.com)
Aug 16, 2019
The React ecosystem offers us a lot of libraries that all are focused on the interaction of drag and drop. We have react-dnd, react-beautiful-dnd, react-drag-n-drop and many more, but some of them require quite a lot of work to build even a simple drag and drop demo, and some do not provide you with more complex functionality, and if they do, it becomes very complex.
  • Maks Akymenko
Building a carousel component in React using Hooks (blog.logrocket.com)
Aug 08, 2019
In this article, we look at implementing a carousel that tries to simplify the entanglement by using React Hooks.
  • Florian Rappl
The neatest way to handle alert dialogs in React (dev.to)
Jul 26, 2019
We will talk about handling dialog alerts in react without tears. If you are tired of tons of copy-pastes just to create new freaking «one question» modal dialog — prepare your coffee we are starting.
  • Dmitriy Kovalenko
Getting to Grips with react-window (alligator.io)
Jul 22, 2019
In the frontend development community, we tend to use the word performance quite a lot. We all have the common goal of having a performant application. Brian Vaughan developed react-window with this in mind and he did a great job of giving us a powerful tool to achieve this goal.
  • Paul Ryan
Build a React Switch Toggle Component (upmostly.com)
Jul 20, 2019
Learn how to build a React switch component using the native HTML checkbox input! You’ll learn plenty about React checkboxes in the process.
  • James King
An Easy Way to Know When React Components Enter the Browser Viewport (alligator.io)
Jul 14, 2019
In this article, you’ll learn how to use React Visibility Sensor to detect when your React components have entered the viewport.
  • William Le
Create a Modal Route with React Router (codedaily.io)
Jul 13, 2019
Let's explore how to create a modal, and how we can go about turning into a route while not un-rendering the current route.
  • Jason Brown
Progressive Enhancements for Loading Images Using React Image (alligator.io)
Jul 12, 2019
In this article, you’ll learn about React Image, a library focused on providing progressive enhancements for loading images in React.
  • William Le
Creating a reading progress bar in React (nehalist.io)
Jul 09, 2019
Creating a reading progress bar which tells you the actual progress of just the current post content in React is quite easy - especially with hooks, which make our component even smaller.
  • Kevin Hirczy
How to Build Great React Search Experiences Quickly (codeburst.io)
Jul 09, 2019
We’ll walkthrough how to build excellent, React-based search experiences using Elastic’s open source Search UI library. It’ll take about 30 minutes and afterwards you’ll be ready to bring search to any application.
  • Jason Stoltzfus
Build custom Modal Component in React (codeburst.io)
Jul 09, 2019
Modals are one of the most vital component of UI elements on the web. they provides a solid foundation for creating dialogs, popover etc. In this article we will see how to build our own modal component in react.
  • Chisom Okoye
Choosing the Right React Datepicker UI Component (telerik.com)
Jun 27, 2019
Finding a good datepicker for your application should be easy, but there are so many options out there and many things to take into consideration.
  • Eric Bishard
Getting started with react-select (blog.logrocket.com)
Jun 20, 2019
In this article, we’ll be going over the awesome features embodied in react-select v2 as well as getting on a launchpad to introduce us to react-select v2 and how to get started.
  • Stephen Afam-Osemene
Unleash the Power of the KendoReact DatePicker Component (telerik.com)
Jun 20, 2019
The KendoReact DatePicker is a flexible React UI component that lets you customize every aspect of it with a custom renderer. In this blog post we cover how to customize the Calendar component of the DatePicker to highlight the US federal holiday schedule.
  • Carl Bergenhem
Using Lightboxes to Create Stunning Image Galleries in React (alligator.io)
Jun 17, 2019
Learn how to use fslightbox-react to create sleek image galleries for your React app. We’ll also compare other lightbox options so that you can make the best decision for your needs.
  • William Le
What to Look for When Choosing a React Data Grid Component (telerik.com)
Jun 13, 2019
Selecting a React grid is something a lot of us will eventually be required to do as an enterprise level developer. In this article I try to give some insight into what features I look for in a data grid.
  • Eric Bishard
Self Positioning React Components (freecodecamp.org)
Jun 04, 2019
While React has ways to break the hatch and directly manipulate the DOM there are very few reasons to do this.
  • Benjamin Schachter
Windowing wars: React-virtualized vs. react-window (blog.logrocket.com)
Jun 04, 2019
react-window is newer, faster, and much lighter, but it doesn’t do everything react-virtualized can do. Use react-window if you can, but react-virtualized has a lot of bells and whistles that might be pretty useful to you.
  • Rico Kahler
How to create a Countdown Component with React (florin-pop.com)
May 15, 2019
Recently I had to create a Countdown for one of my other projects and I thought that it could also make a good tutorial, so in this post we're going to create this component using React and a little bit of SVG.
  • Florin Pop
Build a React Timer Component Using Hooks (upmostly.com)
May 12, 2019
Build a React timer component using the useState and useEffect Hooks in minutes. A React timer component is a great way to learn React, so let’s begin!
  • James King
How to Scroll to Item in React? (robinwieruch.de)
May 07, 2019
A brief tutorial which shows you two use cases on how to scroll to an item within a list of items in a React List Component. We will use the native browser API to scroll to our React element with a button click. It’s up to you how to trigger the event in the end.
Modal Components in React Using Custom Hooks (upmostly.com)
Apr 15, 2019
Building modal dialogs in React is a challenge due to their architectural and accessibility complications. However, there is an easy solution.
  • James King
Creating A Social Follow Component in React (scotch.io)
Mar 25, 2019
On almost every website, you're going to watch to share your Social Media accounts for visitors to follow. In this article, we are going to create a Social Follow component in React!
  • James Quick
Build a Reusable Accordion Component with React and Bit (blog.bitsrc.io)
Mar 05, 2019
In this tutorial, we’ll be creating a reusable React accordion component from scratch, and share it with Bit so it can be used in other apps and people. When done, you will have this component available to use, share and develop for any application you’re working on!
  • Krissanawat​ Kaewsanmuang
Creating a Live Search Feature in React Using Axios (alligator.io)
Feb 28, 2019
In this tutorial we’ll be building a live search feature inside a React app with the help of Axios. Our app will allow us to do a simple movie search using the API from themoviedb.org.
  • Dilshod Turobov
Build an Infinite Scroll Component in React using React Hooks (upmostly.com)
Feb 17, 2019
Today we’re going to dive deeper into React development and learn how to build an infinite scroll component in React using React Hooks. Let’s get started!
  • James King
Building a React Autocomplete Component from scratch (blog.bitsrc.io)
Feb 12, 2019
Autocomplete provides a superior user experience to your app’s visitors. It also helps to avoid redundant spelling errors while searching. In this post, we’ll build a React auto-complete component from scratch.
  • Krissanawat​ Kaewsanmuang
React Dropzone and File Uploads in React (upmostly.com)
Feb 04, 2019
In this tutorial, we’ll learn how to use React Dropzone to create an awesome file uploader. Keep reading to learn more about react-dropzone.
  • James King
Make a simple React app using YouTube API (blog.bitsrc.io)
Feb 04, 2019
In this article, I decided to build a simple react app with using YouTube API which most of you may hear this API. Purpose of sharing this article is to help beginners and other developers to gain a better understanding of React and using API with React.
  • Sultani Anar
How to render modals in React (medium.freecodecamp.org)
Dec 20, 2018
Modals can be a tricky topic in React because of the way React structures the DOM. If you’re familiar with the basics of React, you will…
  • Zubin Pratap
Rendering Lists Using React Virtualized (css-tricks.com)
Dec 13, 2018
Working with data in React is relatively easy because React is designed to handle data as state. The hassle begins when the amount of data you need to consume becomes massive.
  • Kingsley Silas
Creating a progressive image loader (react.christmas)
Dec 12, 2018
I needed one for this site - follow along if you want one too!
  • Kristofer Selbekk
How to make and test your own React drag and drop list with 0 dependencies (medium.freecodecamp.org)
Dec 01, 2018
Before rushing to use a library, you should take a look at your problem and ask yourself if there is a simple way to solve it without relying on a library.
  • Seif Ghezala
Building Skeleton Components with React (css-tricks.com)
Oct 22, 2018
We can level up the user’s perceived performance by breaking the component into two pieces: the container (which displays a skeleton view when it’s empty) and the content.
  • Mathias Rechtzigel
Build an Autocomplete widget with React and Elastic Search (blog.bitsrc.io)
Sep 21, 2018
This post is a compilation of opinionated technical decisions related to building an auto-suggest search widget.
  • Ramachandran R
Building an Autocomplete Component in React (alligator.io)
Aug 19, 2018
Ahhh autocomplete. You don’t realize how amazing it is until you run into an input field that doesn’t have it.
  • Josh Sherman
How To Build A Bar Graph With React (medium.com)
Aug 12, 2018
Today I would like to show you how to go about building a simple bar graph with React.
  • Daniel Zuzevich
5 Most Common Dropdown Use Cases Solved with React Downshift (scotch.io)
Jun 26, 2018
Downshift is a library that helps you build simple, flexible, WAI-ARIA compliant enhanced input React components. Its major use case is for building autocomplete components but it can also be used to build dropdown components.
Headless User Interface Components (dev.merrickchristensen.com)
Jun 23, 2018
A headless user interface component is a component that offers maximum visual flexibility by providing no interface.
  • Merrick Christensen
How To Build A Progress Bar With React (medium.com)
May 20, 2018
This tutorial is for anyone who is interested in how they would go about building a simple progress bar in React.
  • Daniel Zuzevich
Create a custom calendar in React (blog.flowandform.agency)
May 15, 2018
We are going to build simple calendar component in which you will be able to select a date from an active month.
  • Matej Kovač
Build An Image Slider With React & ES6 (medium.com)
Jan 29, 2017
This image slider is far from perfect, but my real goal here is to show people that React is much more approachable than people make it out to be.
  • Daniel Zuzevich

Video Guides & Talks

The state of React Table [email protected]! (youtube.com)
Aug 16, 2019
Come learn about the new React Table 7 alpha version and what it can/will be able to do!
  • Tanner Linsley
How to use Autosuggest in React (youtube.com)
Aug 13, 2019
This video shows how to use the React Autosuggest library to show a dynamic list of countries which is loaded from a JSON endpoint. We'll use it within a Formik form and also cover how to tie Autosuggest into Formik and its validations.
Computing FlatList Indexes in React Native (youtube.com)
Jul 26, 2019
Learn how to compute the index of an item in a FlatList in React Native.
Drag and Drop in React Native with PanResponder (youtube.com)
Jul 25, 2019
Learn how to code a drag and drop flatlist in React Native.
Simple Frontend Pagination | React (youtube.com)
Jun 23, 2019
In this video we will implement some custom pagination in React to get a certain number of fetched posts per page. We will be using the useState and useEffect hooks as well.
The 5 minutes React Native Custom Slider (youtube.com)
May 02, 2019
In this video, we are building a custom slider in 5 minutes using React Native.
Drawing the line between 3rd party and handcrafted components (youtube.com)
May 01, 2019
Often when we write new components, we might be like: Come on, there must be a library out there! And most times there was already someone who faced the same problem... only that it's not quite the same. Should I use the 3rd party lib? Or go with my own? Let's find out the differences and trade-offs in this session.
  • Glenn Reyes
Abstract component modeling in React (youtube.com)
May 01, 2019
In this talk, I'll be showing a set of techniques to model a semi complicated React component, independent from the common integrations.
  • Farzad Yz
React Infinite Scroll Challenge (youtube.com)
Feb 17, 2019
In this video we will create an image gallery with infinite scrolling using Node, React and the Unsplash API. This is a challenge from Scotch.io.
Withings Health Mate - “Can it be done in React Native?” (youtube.com)
Nov 05, 2018
In this video, we are looking at the Withing Health Mate app. They have a nice component to select your target weight and we try to clone it in React Native.
Freeletics Running - “Can it be done in React Native?” (youtube.com)
Oct 22, 2018
In this video, we are looking at the Freeletics running app. We use the Location API to track the position of the phone and to compute the pace/distance ran. We then use maps and SVG to display the position of the phone and a nice circular progress bar.
Soundcloud Audio Player - “Can it be done in React Native?” (youtube.com)
Oct 10, 2018
In this video, we try to clone the Soundcloud audio player using React Native.
3 Press Confirmation Button - React Experiments #1 (youtube.com)
Jul 24, 2018
In this video we build a fun 3 press confirmation button using React. Follow a long and see how to build a real-world component, then take the code and use it yourself!
ReactJS - Build a Responsive Navigation Bar & Side Drawer Tutorial (youtube.com)
Jun 21, 2018
Build a responsive navigation bar with ReactJS and add a React-driven Side Drawer. Learn how to combine functional and class-based React components!
Creating an autocomplete component with downshift (youtube.com)
Jun 13, 2018
Just going to build an autocomplete component with downshift for funzies.
Use React Portals to build a Modal (youtube.com)
Jun 01, 2018
Learn how to build a modal with React Portal.

Courses & Video Series

React for Design (react.design)
Feb 11, 2019
This is a course built specifically for designers looking to use React for interface design.
  • Philip Davis
Beautiful and Accessible Drag and Drop with react-beautiful-dnd (egghead.io)
Jul 28, 2018
In this course, we will create a highly interactive task management application from scratch
  • Alex Reardon
React for Designers (designcode.io)
Jul 24, 2018
With this course, you'll learn how to build and animate your site from scratch. Create highly customizable components for your design system. A 6-hour course for designers, by designers.
  • Meng To
Building a React tooltip library (youtube.com)
Jul 22, 2018
Learn about React Portals while building an open source library for a react tooltip component.
  • Deepak Grover
  • Divyanshu Maithani

Podcast Episodes

RRU 031: "Real-time Editable Datagrid In React" with Peter Mbanugo (devchat.tv)
Oct 02, 2018
In this episode, the panel talks with guest speaker, Peter Mbanugo. Peter is a computer software specialist who works with Field Intelligence and writes technical articles for Progress Software and a few others. He studied at SMC University and currently resides in Nigeria. They talk about his creation, Hamoni Sync, and article, Real-time editable data grid in React.
  • Charles Max Wood
  • Lucas Reis
  • Justin Bennett
  • Peter Mbanugo

Libraries

pimg (pimg.surge.sh)79
v1.2.1
Aug 12, 2019
Pimg is a Progessive Image Component For React, Preact and Vue.js.
  • Ademola Adegbuyi
react-toast-notifications (jossmac.github.io)530
v2.2.4
Aug 09, 2019
A toast notification system for react.
  • Joss Mackison
downshift (downshift.netlify.com)6484
v3.2.12
Aug 09, 2019
🏎 Primitive to build simple, flexible, WAI-ARIA compliant enhanced input React components
react-native-calendars (github.com)3995
v1.205.0
Aug 07, 2019
React Native Calendar Components
  • Tautvilas Mečinskas
  • Wix
react-dnd (react-dnd.github.io)10696
v9.3.4
Aug 06, 2019
Drag and Drop for React
react-native-fontawesome (github.com)158
v7.0.0
Aug 02, 2019
React Native Font Awesome Icons.
  • Leandro Simões
rheostat (airbnb.io)1389
v3.1.0
Aug 02, 2019
Rheostat is a www, mobile, and accessible slider component built with React
reactjs-popup (react-popup.elazizi.com)459
v1.4.2
Aug 01, 2019
React Popup Component - Modals, Tooltips and Menus  —  All in one.
  • Youssouf El Azizi
stack-styled (sapegin.github.io)85
v3.0.0
Jul 24, 2019
React component to make stack layouts easy: adds whitespace horizontal and vertical whitespace between each child element but not around the container.
  • Artem Sapegin
notistack (iamhosseindhv.com)357
v0.8.9
Jul 23, 2019
Highly customizable notification snackbars (toasts) that can be stacked on top of each other.
  • Hossein Dehnokhalaji
react-beautiful-dnd (github.com)13296
v11.0.5
Jul 22, 2019
Beautiful and accessible drag and drop for lists with React
  • Alex Reardon
react-particles-js (rpj.bembi.org)396
v2.7.0
Jul 21, 2019
Particles.js for React.
  • Vincent Garreau
  • Simone Bembi
cogo-toast (cogoport.github.io)33
v3.2.1
Jul 19, 2019
Beautiful, Zero Configuration, Toast Messages.
  • Anmol Mahatpurkar
react-switch (react-switch.netlify.com)771
v5.0.1
Jul 17, 2019
A draggable toggle-switch component for React.
  • Markus Englund
react-simple-img (react-simple-img.now.sh)486
v2.3.3
Jul 10, 2019
React lazy load images with IntersectionObserver API and Priority Hints.
  • Billy
react-window (react-window.now.sh)3051
v1.8.5
Jul 07, 2019
React components for efficiently rendering large lists and tabular data
react-movable (react-movable.netlify.com)579
v2.2.0
Jul 03, 2019
Drag and drop for your React lists and tables. Accessible. Tiny.
  • Vojtech Miksu
react-native-vector-icons (oblador.github.io)10593
v6.6.0
Jun 27, 2019
Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling.
  • Joel Arvidsson
react-dates (airbnb.io)9090
v20.2.5
Jun 27, 2019
An easily internationalizable, mobile-friendly datepicker library for the web
  • Maja Wichrowska
  • Jordan Harband
  • Airbnb
react-kawaii (react-kawaii.now.sh)1776
v0.14.4
Jun 12, 2019
A library of cute SVG illustrations (react components). Ideal if you want to give some cuteness and personality to your react application.
  • Elizabet Oliveira
react-responsive (github.com)3595
v7.0.0
Jun 06, 2019
Media queries in React for responsive design.
  • Eric Schoffstall
  • Matt Thompson
react-select (github.com)15624
v3.0.4
Jun 03, 2019
A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.
  • Jed Watson
react-loading-skeleton (github.com)538
v1.1.2
May 23, 2019
Create skeleton screens that automatically adapt to your app.
  • David Tang
react-email-editor (github.com)1382
v0.9.9
May 15, 2019
Drag-n-Drop Email Editor Component for React.js.
  • Adeel Raza
  • Umair Siddique
react-swipeable-views (react-swipeable-views.com)2846
v0.13.3
May 10, 2019
A React component for swipeable views.
  • Olivier Tassinari
react-icons (react-icons.netlify.com)2637
v3.7.0
May 10, 2019
Include popular icons in your React projects easly with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.
  • Goran Gajic
  • Kamijin Fanta
pigeon-maps (pigeon-maps.js.org)2799
v0.13.0
May 09, 2019
ReactJS maps without external dependencies.
  • Marius Andra
react-virtualized (reactvirtualized.com)14837
v9.21.1
May 08, 2019
React components for efficiently rendering large lists and tabular data.
remount (github.com)342
v0.11.0
Apr 22, 2019
Use your React components anywhere in your HTML as web components (custom elements).
  • Rico Sta. Cruz
react-draggable (github.com)4282
v3.3.0
Apr 19, 2019
A simple component for making elements draggable.
  • Samuel Reed
  • Matt Zabriskie
react-waypoint (brigade.github.io)3059
v9.0.2
Apr 16, 2019
A React component to execute a function whenever you scroll to an element.
  • Joe Lencioni
  • Sergey Petushkov
react-smooth-dnd (kutlugsahin.github.io)1169
v0.11.0
Apr 15, 2019
A fast and lightweight drag&drop, sortable library for React with many configuration options covering many d&d scenarios.
  • Kutlu Sahin
libreact (streamich.github.io)2069
v2.13.1
Apr 05, 2019
Collection of useful React components.
  • Streamich
react-notifications-component (teodosii.github.io)478
v1.1.1
Mar 28, 2019
Highly customisable React component to show UI notifications https.
  • Rares Mardare
react-desktop (reactdesktop.js.org)8119
v0.3.9
Feb 18, 2019
React UI Components for macOS High Sierra and Windows 10.
  • Gabriel Bull
react-event-timeline (rcdexta.com)382
v1.6.3
Jan 13, 2019
A responsive event timeline in React.js.
  • Ramachandran R
pixo (github.com)347
v1.1.2
Oct 02, 2018
Convert SVG icons into React components.
  • Brent Jackson
mauerwerk (github.com)728
v2.0.2
Sep 11, 2018
A react-spring driven masonry-like grid with enter/exit and shared element transitions.
  • Paul Henschel
react-absolute-grid (jrowny.github.io)852
v3.0.1
Apr 01, 2018
An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React.
  • Jonathan Rowny
  • Andrey Okonetchnikov
react-mosaic (palantir.github.io)1637
v0.0.20
Oct 10, 2017
A full-featured React Tiling Window Manager meant to give a user complete control over their workspace.
  • Kevin Verdieck
react-spinkit (kyleamathews.github.io)1187
v3.0.0
May 22, 2017
A collection of loading indicators animated with CSS for React.