Building UI Components With React

Articles & Tutorials

How to: React Table with Sort (robinwieruch.de)
Jun 14, 2021
In this tutorial, I want to show you how to use React Table Library with its useSort plugin for a sort feature. In the previous example, you have already installed React Table Library to create a table component. Now, we will enable users to sort columns in the table by clicking on a column's header.
How to Build a Custom Pagination Component in React (freecodecamp.org)
Jun 14, 2021
In this post, we will focus on pagination and we'll build a custom controlled component that handles page buttons based on the current page and total data count.
  • Shubham Khatri
Using a Desktop-Like Window Interface in Your React App (telerik.com)
Jun 10, 2021
Let’s take a look at the KendoReact Window component, which allows you to resize, minimize, maximize and even drag windowed items on the web similar to desktop functionality.
  • Thomas Findlay
Implementing swiper components in React Native (blog.logrocket.com)
Jun 09, 2021
In this tutorial, we’ll build five different React Native swiper components for various use cases using Expo.
  • Clayton Francis
Displaying images with the React Native Image component (blog.logrocket.com)
Jun 08, 2021
In this article, we’ll dive into the basics of the React Native Image component, discuss the types and props available, and cover its limitations and alternatives.
  • Temiloluwa Ojo
Building a tag input field component for React (blog.logrocket.com)
May 07, 2021
Ever wonder how to build a tag input field component for your React app? Here’s how.
  • Doğacan Bilgili
API Design for a React Tree Table (robinwieruch.de)
May 03, 2021
Here I want to give you a walkthrough of my thought process, how I designed the API requirements, and how I implemented this tree table component in React eventually.
How to create a split pane component in React (blog.logrocket.com)
Mar 30, 2021
Split panes are a constant part of a developer’s life. Whether it’s to divide the many areas of your favorite desktop or web IDE, it’s a great feature to improve the user experience in terms of screen organization.
  • Julio Sampaio
React Table: The Headless Table Library for React (blog.bitsrc.io)
Mar 29, 2021
4 steps guide to creating a table with search and filter options.
  • Piumi Liyana Gunawardhana
Top 10 React Grid components and libraries for 2021 (blog.logrocket.com)
Mar 12, 2021
In this post, we’ll look at the top ten unranked React Grid component libraries that help you build great-looking and performant grid layouts.
  • Nelson Michael
Top React date pickers for 2021 (blog.logrocket.com)
Jan 13, 2021
In this post, I’ll walk you through some of the date picker libraries that I found really useful. Note that we’ll only be going through the libraries which have been updated recently. This is to ensure it will work on your project without going through a lot of hoops.
  • Wern Ancheta
How to create an avatar feature with React (blog.logrocket.com)
Nov 12, 2020
In this article, we will take a look at this library, what it does, and, by the end of the article, create a simple React app wherein users can import an image from their computer, use it to make an avatar, and download the avatar to their computer.
  • Yusuff Faruq
How to build a search bar in React (emgoto.com)
Nov 06, 2020
A search bar is a great way to make content on your website discoverable. In this tutorial, we’ll be building an accessible search bar component using React. We’ll also be adding a couple of unit tests with React Testing Library.
  • Emma Goto
How to Add Drag and Drop in React with React Beautiful DnD (freecodecamp.org)
Oct 05, 2020
Drag and Drop is a common interaction technique added to allow people to intuitively move things around on a page. This could be reordering a list or even putting together a puzzle.
  • Colby Fayock
Positioning a tooltip in React using Tippy (blog.logrocket.com)
Oct 01, 2020
This tutorial will show you how to create and position tooltips in a React project using Tippy.
  • Samantha Snead
One React mistake that's slowing you down (epicreact.dev)
Sep 25, 2020
One thing that I like about React is that it allows me to write my components like little black boxes of abstraction. I can look at a design and draw lines around the UI elements and I know the components that I'm going to be making.
Build A Confirmation Modal in React with State Machines (daveceddia.com)
Aug 19, 2020
Ever needed to wire up a confirmation dialog in React? You know the ones: “Really delete this file? — Yes / Cancel”
Creating reordered lists with Sortable.js and React (blog.logrocket.com)
Jul 28, 2020
In this tutorial, we’re going to explore the official support for React via the react-sortablejs wrapping component. Let’s analyze how Sortable.js organizes a list of items by creating, editing, and deleting some of them.
  • Diogo Souza
Let’s Build a Financial Dashboard with React (telerik.com)
Jun 17, 2020
In this tutorial we'll build a sample financial dashboard from scratch, and learn a bit about CSS grid, KendoReact, and theming in the process.
  • TJ VanToll
Building a Universal Higher-Order Component Page Loader for your React App (blog.bitsrc.io)
Jun 10, 2020
Loading screens are needed everywhere — don’t reinvent the wheel every time.
  • Paige Niedringhaus
Create a drag-and-drop component with react-dropzone (blog.logrocket.com)
Jun 04, 2020
In this tutorial, I’ll demonstrate how to create a component for dragging and dropping images to upload. The component will include a regular image click and select functionality.
  • Uzochukwu Eddie Odozi
How to implement scroll with React-gridlist (blog.logrocket.com)
Jun 03, 2020
Getting scroll to work perfectly requires a lot of trial and error. React-gridlist provides a painless and fast way to implement scroll in your application.
  • Jeremy Kithome
Learn how to build a fast & responsive markdown editor with React, Firebase, & SWR (kartikn.me)
May 10, 2020
Building a sleek and user-friendly markdown editor.
  • Kartik Nair
Building A React Folder Tree Component (anuraghazra.github.io)
Apr 29, 2020
Today we will be creating a Folder Tree Component in Reactjs from scratch.
  • Anurag Hazra
Implementing Skeleton Screens In React (smashingmagazine.com)
Apr 20, 2020
In this tutorial, you’ll learn what a skeleton screen UI is and some types of skeleton screen libraries, along with their pros and cons. We’ll build a YouTube-like skeleton screen UI using React Loading Skeleton. Then, you can experiment on your own with the skeleton screen React package of your choice.
  • Blessing Krofegha
ReanimatedArc – Build Circular Animated UI Elements In React Native (callstack.com)
Apr 15, 2020
Build good-looking and smooth animated arcs in React Native with ReanimatedArc library.
  • Jakub Mazurek
Building and styling tables with react-table v7 (blog.logrocket.com)
Apr 02, 2020
It’s widely acknowledged that creating a table with React is a pain. No surprise, then, that there are many libraries to make creating tables easier for React apps. One of these packages that aims to make our lives easier is react-table. It provides a modern, Hooks-based API to let us create tables with React with little hassle. In this article, we’ll look at how to use react-table to add tables to our React app.
  • John Au-Yeung
Complete guide to building product tours on your React apps (blog.logrocket.com)
Mar 26, 2020
In this post, you’ll learn how to build a simple product tour for your React application.
  • Paramanantham Harrison
Creating Sortable Tables With React (smashingmagazine.com)
Mar 20, 2020
Making your tables sortable in React might sound like a daunting task, but it doesn’t have to be too difficult. In this article, we’re going to implement all you need to sort out all of your table sorting needs.
  • Kristofer Selbekk
How to create a custom toast component with React (blog.logrocket.com)
Mar 11, 2020
In this tutorial, I’ll demonstrate how to create a custom toast component with React. We’ll use React hooks such as useState and useEffect. After creating the toast component, we’ll add some simple buttons to try out and display the toast on our page.
  • Uzochukwu Eddie Odozi
How To Use The HTML Drag-And-Drop API In React (smashingmagazine.com)
Feb 19, 2020
In this tutorial, we’ll build a React drag-and-drop component for file and image uploads. In the process, we’ll learn about the HTML drag-and-drop API. We will also learn how to use the useReducer hook for managing state in a React functional component.
  • Chidi Orji
10 Useful React Components for 2020 (blog.bitsrc.io)
Feb 10, 2020
Different React components for different occasions.
  • Eden Ella
Better Modals in React (telerik.com)
Jan 27, 2020
Learn about how we can build fully customized, accessible, and better modals in React using a React API called Portals.
  • Leonardo Maldonado
DIY React Popups with Popper.js 2 (itnext.io)
Jan 24, 2020
I needed to build a custom select input in React. As usual, it came down to rendering a popup element with available options and figuring out its positioning relative to the input element, making sure the component is responsive and reacts properly to window resizing, while maintaining keyboard accessibility.
  • Ismayil Khayredinov
How to build an accessible date picker component in React (blog.logrocket.com)
Dec 30, 2019
In this article, we will be building an accessible date picker component that leverages the accessibility guidelines.
  • Jeremy Kithome
A recipe for toasts (react.christmas)
Dec 20, 2019
Toasts are great, so simple but yet so useful. It is for many a part of their daily life, which is why we will today provide one of the quickest and simplest recipes for making toast. Let's dive in.
  • Aryan Iranzamini
React Responsive Slider (itnext.io)
Dec 19, 2019
In this article I continue to rebuild additional portions of the site with the main focus on implementing the bottom slider functionality in the header section on the main page.
  • Joe Keohan
Build a Star Rating Component for React (scotch.io)
Dec 09, 2019
React gives the ability to create a component for rating that can be used and re-used anyplace a rating component is needed.
  • Lee Brandt
How to React Range (robinwieruch.de)
Dec 02, 2019
In this React component tutorial by example, we will create a React Range Component with React Hooks and a Function Component.
How to React Slider (robinwieruch.de)
Dec 02, 2019
In this React component tutorial by example, we will create a React Slider Component with React Hooks and a Function Component.
The complete guide to building a smart data table in React (blog.logrocket.com)
Nov 28, 2019
Table UIs are very common in web products because they’re one of the easiest way to organize complex data in the UI. Many companies use data tables to show complex reports.
  • Paramanantham Harrison
Create a Toggle Switch in React as a Reusable Component (sitepoint.com)
Nov 21, 2019
In this article, we’re going to create an iOS-inspired toggle switch using React components. By the end, we’ll have built a simple demo React App that uses our custom toggle switch component.
  • Praveen Kumar
The complete guide to building inline editable UI in React (blog.logrocket.com)
Nov 06, 2019
UI for web applications are becoming increasingly complex by the day. With more powerful client side libraries, we can push the limits of UX through UI experimentation. One of these experiments involves inline editable UI.
  • Paramanantham Harrison
Writing a custom React hook: Google Places autocomplete (sebastiandedeyne.com)
Oct 11, 2019
I built a small React component that uses the Google Places API to autocomplete an address in a project I’m working on, and extracted the predection fetching to a custom useAddressPredictions hook. It’s a nice example of a custom React hook composed of different primisite hooks, so I decided to pen write my thought process while building it.
  • Sebastian De Deyne
Building Reusable React UI Components with styled-components (blog.bitsrc.io)
Oct 07, 2019
Learn how to use styled-components with Bit to create a reusable UI component.
  • Sonny Recio
Building a photo gallery app from scratch with Chakra UI (blog.logrocket.com)
Oct 02, 2019
In this post, I will walk you through building a complete app using these two frameworks, plus Chakra UI for component styling.
  • Foysal Ahamed
Demonstrating Reusable React Components in a Form (css-tricks.com)
Oct 02, 2019
Components are the building blocks of React applications. It’s almost impossible to build a React application and not make use of components. It’s widespread to the point that some third-party packages provide you with components you can use to integrate functionality into your application.
  • Kingsley Silas
How to build a progress bar with React Native (blog.logrocket.com)
Sep 26, 2019
A progress bar (sometimes referred to as a progress indicator) is a visual indicator or representation of the progress of a particular task. This can be an operation such as download, file transfer/upload, installation, program execution or even completed steps in profile setup.
  • Jeremy Kithome
A Dark Mode Toggle with React and ThemeProvider (css-tricks.com)
Sep 25, 2019
In this tutorial, we’re going to build a toggle that allows users to switch between light and dark modes, using a <ThemeProvider wrapper from the styled-components library.
  • Maks Akymenko
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

Snapping to Edges with Gesture Callbacks – Image Cropper (youtube.com)
Jan 15, 2021
In this video we'll learn how to use some new hooks from React Use Gesture to snap our image to the edges of our container!
  • Sam Selikoff
React Slider with Material UI and Typescript (youtube.com)
Oct 20, 2020
This is a video on how to use data from the Final Space API to populate a React Slider Component that I built a while ago.
  • Thomas Weibenfalk
Image Uploads to Cloudinary in React with Drag & Drop (youtube.com)
Oct 20, 2020
In this video we upload images directly to Cloudinary straight from the browser in React using Drag & Drop courtesy of react-dropzone. We'll cover both unsigned and signed approaches by utilizing Next.js' API pages to hide our secrets.
React Portal - Create a Modal popup with React and Typescript (youtube.com)
Aug 18, 2020
I show how to create a modal popup with React, Typescript and the NES.css library to spice things up.
  • Thomas Weibenfalk
Slider - React Native Fashion (youtube.com)
Jul 09, 2020
In this series, we are building a React Native App from 0 to 1.
Let's Create Interactive Tabs with react-tabs (youtube.com)
May 16, 2020
In this video, we will build an accessible tab in ReactJS. I will also show you how to download and use illustrations for free.
  • Hong Ly
Build Modern Charts with ApexCharts.js (youtube.com)
May 09, 2020
In this video, I will be showing you how to modern and stunning graphs using ApexCharts library.
  • Hong Ly
Trying out react-virtual (replacing react-window) (youtube.com)
May 08, 2020
I'm currently using react-window for the "windowing" lesson, but Tanner Linsley released react-virtual and I want to give it a try.
Drag n' Drop Files in React - Parsing CSVs (youtube.com)
May 02, 2020
In this demo we handle drag n' drop file functionality in React in order to parse CSV files, extracting contact defaults to place into our state.
React & Tailwind CSS Image Gallery (youtube.com)
Apr 09, 2020
In this project we will integrate Tailwind CSS with React and build an image gallery app with the Pixabay API.
React Infinity Scroll (youtube.com)
Apr 07, 2020
Learn how to create an infinity scroll in React that fetches data from an API and loads more on scroll.
  • Thomas Weibenfalk
Ultimate Calendar - Date Picker (youtube.com)
Feb 01, 2020
In this video, I will show you how to install and implement a simple React Calendar using react-calendar.
  • Hong Ly
Timeline Component in React (and some CSS Magic) (youtube.com)
Jan 06, 2020
In this tutorial we're going to use #ReactJS to create a wonderful #Timeline Component. Also, we're going to use #CSS to add some magic 🎩on top to make it look beautiful!
  • Florin Pop
Drag and Drop Files using react-dropzone (youtube.com)
Nov 30, 2019
In this video, I will show you how to create a drag and drop functionality in React with react-dropzone.
  • Hong Ly
Drag and Drop Files using react-dropzone (youtube.com)
Nov 30, 2019
In this video, I will show you how to create a drag and drop functionality in React with react-dropzone.
  • Hong Ly
React & Infinite Scroll - IntersectionObserver (youtube.com)
Sep 23, 2019
We'll use IntersectionObserver to build an infinite scrolling list which loads additional data when the user reaches the bottom of the list.
  • Leigh Halliday
The state of React Table 7@alpha! (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.