Greeting to all the developer out there, in this article we are going to talk about few of the most important NPM packages for animations which are available for React.js. So all web developers especially front-end developers know that even they are making a very good design or a great website it won’t look perfect without animation. Web animations is an important technology to catch the user’s eye and make the layout of the website look cool and elegant.
Without wasting any more time let us jump straight to it and look at one of the best NPM packages available for React animation.
#1 React-Vis
React-vis is a library of React visualizations created by Uber. It is also open for free on Github for any developer to use. This library is specifically used for graphs and animations or visualization animations that we would like to with any graphs.
With React-Vis you can easily create common charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, hexagon heatmaps, pie and donut charts, sunbursts, radar charts, parallel coordinates, treemaps, and many more.
I’m going to have a link below so you can go to the real website easily and look at examples.
https://uber.github.io/react-vis/examples/showcases/plots
A total of 6 downloads per week for the React-Vis NPM package. And one of the reasons that support that is we appraised the popularity level of React-Vis to be small.
We find that it has been starred 7,506 times based on project statistics from the GitHub repository for the React-Vis NPM package and that it depends on 0 other ecosystem projects.
Simply this library is one of the best out there for all developers to use because:
- Simple: React-vis does not need any deep knowledge of data visualization libraries to start generating the first visualizations.
- Flexible: React-Vis offers a set of basic building blocks for different charts. Separate X-axis and Y-axis components. For applications that require it, this could provide a high degree of chart layout control.
- React integration: React-Vis supports React’s lifecycle and does not produce unwanted nodes.
- Easy to use: The library contains a set of defaults that can be overridden by custom user configurations.
Now that we have gone through some information about this library and what makes it easy and enjoyable to work with, we can see how to install React-Vis.
#Installation
First of all, use this NPM code to install this library on your computer so that you can work with it.
Simple use-case
Let’s create a chart section with some random details first, just to get an idea of how it works.
Make sure that the built-in main CSS file is included on your HTML page or via SASS, after downloading React-Vis:
You can only select the styles you want to use, as well. This helps minimize the CSS production size. And as always we got you with an example of only the forms of legends being imported in case you wondered how, so simply import the code you see below:
Also, Make sure this line of code is imported too:
Now it is time to add to our render function the following code:
Now your overall code should be something like this:
Note: Here, as you can see in the above picture, I passed an array of X and Y values that show how my graph would look like.
And this is the final result.
If you work in a non-node environment, you can also use simple HTML tags to directly include the package and the compiled type.
<link rel="stylesheet" href="https://unpkg.com/react vis/dist/style.css"><script type="text/javascript" src="https://unpkg.com/react-vis/dist/dist.min.js"></script>
Conclusion
Programmers enjoy using this library to build great visualization web apps so hopefully this will get you motivated to use React-vis library as well and build more apps with animation.
