Building UI Components With React

Articles & Tutorials

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

notistack (iamhosseindhv.com)357
v0.8.4
May 17, 2019
Highly customizable notification snackbars (toasts) that can be stacked on top of each other.
  • Hossein Dehnokhalaji
react-simple-img (react-simple-img.now.sh)486
v2.2.0
May 16, 2019
React lazy load images with IntersectionObserver API and Priority Hints.
  • Billy
react-native-calendars (github.com)3995
v1.141.0
May 16, 2019
React Native Calendar Components
  • Tautvilas Mečinskas
  • Wix
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-dates (airbnb.io)9090
v20.2.0
May 14, 2019
An easily internationalizable, mobile-friendly datepicker library for the web
  • Maja Wichrowska
  • Jordan Harband
  • Airbnb
reactjs-popup (react-popup.elazizi.com)459
v1.4.0
May 11, 2019
React Popup Component - Modals, Tooltips and Menus  —  All in one.
  • Youssouf El Azizi
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.
react-beautiful-dnd (github.com)13296
v11.0.3
May 08, 2019
Beautiful and accessible drag and drop for lists with React
  • Alex Reardon
downshift (downshift.netlify.com)6484
v3.2.10
Apr 24, 2019
🏎 Primitive to build simple, flexible, WAI-ARIA compliant enhanced input React components
react-kawaii (react-kawaii.now.sh)1776
v0.12.0
Apr 23, 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-draggable (github.com)4282
v3.3.0
Apr 19, 2019
A simple component for making elements draggable.
  • Samuel Reed
  • Matt Zabriskie
react-toast-notifications (jossmac.github.io)530
v1.4.0
Apr 18, 2019
A toast notification system for react.
  • Joss Mackison
react-select (github.com)15624
v2.4.3
Apr 17, 2019
A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.
  • Jed Watson
stack-styled (sapegin.github.io)85
v1.0.0
Apr 17, 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
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
react-particles-js (rpj.bembi.org)396
v2.6.0
Apr 14, 2019
Particles.js for React.
  • Vincent Garreau
  • Simone Bembi
react-window (react-window.now.sh)3051
v1.8.1
Apr 13, 2019
React components for efficiently rendering large lists and tabular data
libreact (streamich.github.io)2069
v2.13.1
Apr 05, 2019
Collection of useful React components.
  • Streamich
react-dnd (react-dnd.github.io)10696
v7.4.5
Apr 03, 2019
Drag and Drop for React
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-native-vector-icons (oblador.github.io)10593
v6.4.2
Mar 20, 2019
Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling.
  • Joel Arvidsson
react-loading-skeleton (github.com)538
v1.1.1
Mar 19, 2019
Create skeleton screens that automatically adapt to your app.
  • David Tang
react-desktop (reactdesktop.js.org)8119
v0.3.9
Feb 18, 2019
React UI Components for macOS High Sierra and Windows 10.
  • Gabriel Bull
remount (github.com)342
v0.9.5
Feb 17, 2019
Use your React components anywhere in your HTML as web components (custom elements).
  • Rico Sta. Cruz
react-switch (react-switch.netlify.com)771
v4.1.0
Feb 17, 2019
A draggable toggle-switch component for React.
  • Markus Englund
react-movable (react-movable.netlify.com)579
v2.0.1
Feb 13, 2019
Drag and drop for your React lists and tables. Accessible. Tiny.
  • Vojtech Miksu
react-responsive (github.com)3595
v6.1.1
Jan 29, 2019
Media queries in React for responsive design.
  • Eric Schoffstall
  • Matt Thompson
react-event-timeline (rcdexta.com)382
v1.6.3
Jan 13, 2019
A responsive event timeline in React.js.
  • Ramachandran R
rheostat (airbnb.io)1389
v3.0.2
Dec 11, 2018
Rheostat is a www, mobile, and accessible slider component built with React
react-native-fontawesome (github.com)158
v6.0.1
Dec 03, 2018
React Native Font Awesome Icons.
  • Leandro Simões
cogo-toast (cogoport.github.io)33
v1.0.4
Oct 12, 2018
Beautiful, Zero Configuration, Toast Messages.
  • Anmol Mahatpurkar
pixo (github.com)347
v1.1.2
Oct 02, 2018
Convert SVG icons into React components.
  • Brent Jackson
pimg (pimg.surge.sh)79
v1.1.3
Sep 21, 2018
Pimg is a Progessive Image Component For React, Preact and Vue.js.
  • Ademola Adegbuyi
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.