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

Install

npm install --save react-credit-cards

Usage

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

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.

Installing

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

Usage

React-window code example

Learn more at react-window.now.sh.


react-tabs

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

react-tabs demo

Installing

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

Usage

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

Installation

npm install react-sidebar

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

npm install @types/react-sidebar

Usage

React Sidebar class-based code example

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


React-Toastify

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.

Installation

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

Usage

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

Installation

npm install react-tooltip

Usage

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.


Conclusion

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 @ https://twitter.com/lasnindrek

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