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