Building UI Components With React

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.

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.

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.

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.

This tutorial will show you how to create and position tooltips in a React project using Tippy.

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.

Ever needed to wire up a confirmation dialog in React? You know the ones: “Really delete this file? — Yes / Cancel”

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.

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.

Loading screens are needed everywhere — don’t reinvent the wheel every time.

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.

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.

Building a sleek and user-friendly markdown editor.

Today we will be creating a Folder Tree Component in Reactjs from scratch.

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.

Build good-looking and smooth animated arcs in React Native with ReanimatedArc library.

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.

In this post, you’ll learn how to build a simple product tour for your React application.

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.

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.

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.

Different React components for different occasions.

Learn about how we can build fully customized, accessible, and better modals in React using a React API called Portals.

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.

In this article, we will be building an accessible date picker component that leverages the accessibility guidelines.

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.

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.

React gives the ability to create a component for rating that can be used and re-used anyplace a rating component is needed.

In this React component tutorial by example, we will create a React Range Component with React Hooks and a Function Component.

In this React component tutorial by example, we will create a React Slider Component with React Hooks and a Function Component.

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.

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.

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.

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.

Learn how to use styled-components with Bit to create a reusable UI component.

In this post, I will walk you through building a complete app using these two frameworks, plus Chakra UI for component styling.

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.

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.

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.

Drag and drop UI has become an integral part of most modern applications. It provides richness in UI without comprising the UX.

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.

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.

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.

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.

In this article, we look at implementing a carousel that tries to simplify the entanglement by using React Hooks.

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.

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.

Learn how to build a React switch component using the native HTML checkbox input! You’ll learn plenty about React checkboxes in the process.

In this article, you’ll learn how to use React Visibility Sensor to detect when your React components have entered the viewport.

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.

In this article, you’ll learn about React Image, a library focused on providing progressive enhancements for loading images in React.

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.

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.

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.

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.

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.

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.

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.

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.

While React has ways to break the hatch and directly manipulate the DOM there are very few reasons to do this.

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.

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.

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!

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.

Building modal dialogs in React is a challenge due to their architectural and accessibility complications. However, there is an easy solution.

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!

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!

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.

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!

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.

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.

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.

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…

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.

I needed one for this site - follow along if you want one too!

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.

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.

This post is a compilation of opinionated technical decisions related to building an auto-suggest search widget.

Ahhh autocomplete. You don’t realize how amazing it is until you run into an input field that doesn’t have it.

Today I would like to show you how to go about building a simple bar graph with React.

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.

A headless user interface component is a component that offers maximum visual flexibility by providing no interface.

This tutorial is for anyone who is interested in how they would go about building a simple progress bar in React.

We are going to build simple calendar component in which you will be able to select a date from an active month.

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.

In this project we will integrate Tailwind CSS with React and build an image gallery app with the Pixabay API.

Learn how to create an infinity scroll in React that fetches data from an API and loads more on scroll.

In this video, I will show you how to install and implement a simple React Calendar using react-calendar.

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!

In this video, I will show you how to create a drag and drop functionality in React with react-dropzone.

In this video, I will show you how to create a drag and drop functionality in React with react-dropzone.

We'll use IntersectionObserver to build an infinite scrolling list which loads additional data when the user reaches the bottom of the list.

Come learn about the new React Table 7 alpha version and what it can/will be able to do!

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.

Learn how to compute the index of an item in a FlatList in React Native.

Learn how to code a drag and drop flatlist in React Native.

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.

In this video, we are building a custom slider in 5 minutes using React Native.

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.

In this talk, I'll be showing a set of techniques to model a semi complicated React component, independent from the common integrations.

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.

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.

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.

In this video, we try to clone the Soundcloud audio player using React Native.

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!

Build a responsive navigation bar with ReactJS and add a React-driven Side Drawer. Learn how to combine functional and class-based React components!

Just going to build an autocomplete component with downshift for funzies.

Learn how to build a modal with React Portal.

Beautiful and accessible drag and drop for lists with React

Particles.js for React.

Beautiful, Zero Configuration, Toast Messages.

A draggable toggle-switch component for React.

React lazy load images with IntersectionObserver API and Priority Hints.

React components for efficiently rendering large lists and tabular data

Drag and drop for your React lists and tables. Accessible. Tiny.

Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling.

An easily internationalizable, mobile-friendly datepicker library for the web

A library of cute SVG illustrations (react components). Ideal if you want to give some cuteness and personality to your react application.

Media queries in React for responsive design.

A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.

Create skeleton screens that automatically adapt to your app.

React beautiful input range slider.

Drag-n-Drop Email Editor Component for React.js.

A React component for swipeable views.

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.

ReactJS maps without external dependencies.

React components for efficiently rendering large lists and tabular data.

Use your React components anywhere in your HTML as web components (custom elements).

A simple component for making elements draggable.

A React component to execute a function whenever you scroll to an element.

A fast and lightweight drag&drop, sortable library for React with many configuration options covering many d&d scenarios.

Collection of useful React components.

Highly customisable React component to show UI notifications https.

React UI Components for macOS High Sierra and Windows 10.

A responsive event timeline in React.js.

Convert SVG icons into React components.

A react-spring driven masonry-like grid with enter/exit and shared element transitions.

An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React.

A full-featured React Tiling Window Manager meant to give a user complete control over their workspace.

A collection of loading indicators animated with CSS for React.