Useful React Libraries

Hi, I’m Kishen Deemud. In this article I will give you an introduction about most important react libraries.

React Material UI

First one is React Material UI. What it gives is a set of components that's styled after google's material design. The upside to using this library is that it greatly speeds up the development. You get a solid base that's been around since 2014. And you get consistent load that people know and trust.

You can install it using

npm install @material-ui/core

And also you need to include link tags to use the font or font icons. If you want to use SVG icons, you would also use

npm install @material-ui/icons

Using these components is a very straightforward, you import the component that you need into your code and use it in your jsx definition, and can change it's properties suit your needs.

So this library is very easy to use. You can speed up your development. And it's great for things like building and mvp really quickly.

https://material-ui.com/

React Spring

This is a different type of animated library. And what makes this different is that, it's spring physics based rather than time based. What that means is that you get more realistic interaction with the animated components. Now the original idea came from Cheng Lou's react motion. But this library incorporates that as well as ideas from Christopher Chedeau's animated library in a nice new package.

You can install it using

npm install react-spring

Let's look at some basics on how to use it.

There are five hooks

1. useChain

2. useSpring

3. useSprings

4. useTrail

5. useTransition

Here's an example of using one of the hook to use spring.

So you import the hook and you would use the hook to define the property. Then you would use the property in an animated div. So it's pretty straightforward and you can use it to your project. 

https://react-spring.io/

React Bootstrap

This is very similar to react material UI. In that it speeds up the developments. It's a very stable code base and have UI that people are familiar. The choice to use react bootstrap really depends on if you like the UI or not.

You can install it using

npm install react-bootstrap bootstrap

You would also need to include some script tags in your index page. And to use it, you would import the component that you want in to your react code and using it in your jsx.

So this one is also very easy to use. You can speed up your development. 

https://react-bootstrap.github.io/

So I hope you understand my explanation about Useful React libraries. Thank you!