Here Are 6 Useful React Components
Credit cards, tabs, sidebars, and more
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-window is a react component for efficiently rendering large lists and tabular data.
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:
- It reduces the amount of work (and time) required to render the initial view and to process updates.
- It reduces the memory footprint by avoiding the overallocation of DOM nodes.
yarn add react-window# NPM
npm install --save react-window
Learn more at react-window.now.sh.
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
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.
- 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
onClosehooks. Both can access the props passed to the React component rendered inside the toast.
$ npm install --save react-toastify
$ yarn add react-toastify
Learn more about React-Toastify here.
React Tooltip is a simple tooltip package. A tooltip is useful for various reasons — especially when it comes to showing extra information to users.
npm install react-tooltip
react-tooltip after installation.
import ReactTooltip from 'react-tooltip'
data-tip = “your placeholder” to your element.
<p data-tip="hello world">Tooltip</p>
3. Include the
Learn more about React Tooltip here.
Thanks for reading, and I hope you gained something useful from this article. Happy coding!