Five NPMs to Add Flair to your next React App

I recently spent some time discovering some great React-Native npms that can add some great functionality to a project. Since then I thought it would be a great idea to do that for react web applications. In this article I am going to briefly introduce five npm packages that will allow you to add some really fun functionality to different projects.

React-Hover

This nifty package allows you and your users to render a new component by hovering over another one. The “react-hover’’ npm provides a great way to preview options or other other components without having to navigate away from your current component. This wrapper is fairly easy to implement allowing you to choose a component to serve as the “trigger component” and a component to serve as the “hover component”. To see more about this particular npm visit the documentation.

To install the react-hover npm simply run:

$ npm install --save react-hover

React-Awesome-Slider

The ‘react-awesome-slider’ is great to add a fun way to navigate around different parts of a project. It is a highly customizable, production ready React component that renders a media gallery carousel. It provides a wonderfully animated way for users to browse a web application. To see more about this npm package be sure to visit the documentation.

To install the “react-awesome-slider” package just run:

$ npm install --save react-awesome-slider

React-Awesome-Button

The react-awesome-button provides a lightweight customizable 3D UI button that can be added to any project. This package comes with several fully animated features that allow your buttons to really stand out. To learn more about how to implement this into your next project simply head to the documentation here.

To install the “react-awesome-button” run:

$ npm install --save react-awesome-button

React-Flippy

The “react-flippy” npm allows you turn your components into reversible cards. This feature is great for designing web games, creating a virtual business card, and more. This wrapper allows you to discern between the “front” and “back” of the card and choose how you want it to flip. To learn more please visit their official documentation.

To install the “react-flippy” npm run”

$ npm install react-flippy

React Beautiful DnD (Drag and Drop)

The “react-beautiful-dnd” package allows you to add a drag and drop functionality to your projects. This is a great way to allow users to move items around within or between lists. It also supports a variety of other features such as adding and removing items, auto scrolling, and combining items. Check out more on this package with their documentation.

To install the “react-beautiful-dnd package” run:

$ npm install react-beautiful-dnd --save

Conclusion

These are just a few great npm’s that can add different functionalities to any of your projects. Several of these I have found through my own personal usage, but others I found through using the “Absolutely Awesome React Components & Library” github page. Check it out to find recommendations on packages that allow you to add things tables, graphs, infinite scrolling, notifications and more. Happy Coding!