Here Are 6 Useful React Components

Credit cards, tabs, sidebars, and more

Indrek Lasn
Feb 3 · 4 min read
Photo by Fabian Grohs on Unsplash

One of the biggest perks of using React is it has a vast amount of open-source packages that’ll speed up your development and make your life easier. Why not save time by making use of all the packages provided by the community?

Without further ado, here’s a list of useful React components I use often to save time.

React Credit Cards

React Credit Cards is a slick credit-card component for React.

React Credit Cards demo


npm install --save react-credit-cards


React Credit Cards code example

Don’t forget to import the CSS as well:

import 'react-credit-cards/es/styles-compiled.css';

Learn more about the react-credit-cards component here.


react-window on GitHub

react-window is a react component for efficiently rendering large lists and tabular data.

react-window demo

react-window works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:

  1. It reduces the amount of work (and time) required to render the initial view and to process updates.
  2. It reduces the memory footprint by avoiding the overallocation of DOM nodes.


# Yarn
yarn add react-window
npm install --save react-window


React-window code example

Learn more at


react-tabs is an accessible and easy tab component for ReactJS.

react-tabs demo


yarn add react-tabs
npm install --save react-tabs


react-tabs code example

Learn more about react-tabs here.

React Sidebar

React Sidebar demo

React Sidebar is a sidebar component for React 0.14+. It offers the following features:

  • The sidebar can slide over the main content or dock next to it
  • Touch-enabled: Swipe to open and close the sidebar — like on a native mobile app
  • Easy to combine with media queries to show the sidebar only when there’s enough screen width (see example)
  • Works on both the left and on the right sides
  • Tiny size: <2.5kB gzipped


npm install react-sidebar

If you use TypeScript, typings are available on DefinitelyTyped and can be installed with:

npm install @types/react-sidebar


React Sidebar class-based code example

If you’re interested, here’s the full documentation for the React Sidebar component.


React-Toastify allows you to add notifications to your app with ease.

React-Toastify demo

React-Toastify Features

  • Easy to set up — you can make it work in less than 30 seconds
  • Easy to customize
  • RTL support
  • Swipe to close
  • Can display a React component inside the toast
  • Has onOpen and onClose hooks. Both can access the props passed to the React component rendered inside the toast.


$ npm install --save react-toastify
$ yarn add react-toastify


react-toastify code example

Learn more about React-Toastify here.

React Tooltip

React Tooltip is a simple tooltip package. A tooltip is useful for various reasons — especially when it comes to showing extra information to users.

React Tooltip demo


npm install react-tooltip


1. Import react-tooltip after installation.

import ReactTooltip from 'react-tooltip'

2. Add data-tip = “your placeholder” to your element.

<p data-tip="hello world">Tooltip</p>

3. Include the react-tooltip component.

<ReactTooltip />

Learn more about React Tooltip here.


Thanks for reading, and I hope you gained something useful from this article. Happy coding!

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Web & iOS Engineer, connect with me on Twitter @

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade