Top React Libraries — Measurements, Charts, and Videos

Image for post
Image for post
Photo by patricia serna on Unsplash

To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

React Measure

React Measure is an easy to use library to let us get various dimensions of the screen.

To install it, we can run:

Then we can use it by writing:

We get the measurements with the contentRect prop.

measureRef is passed into the element that we want to get the size of.

Then we can use the withContentRect higher-order component with it.

'bounds' means we get the dimensions of the bounds.

We can also use it to get the dimensions of the offsets, margins, and more.

ReactPlayer

ReactPlayer is a library that we can use to embed videos from various sources.

It supports embedding YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion videos.

To install it, we run:

Then we can use it by writing:

We just pass in the ReactPlayer component with the URL of the video set in the url prop.

In addition to this, we can change various options like looping, controls, width, height, other styles, a player icon, volume, and more.

They’re all available via props passed to ReactPlayer , so we can write:

to show the controls with the controls prop for example.

react-chartjs-2

react-chartjs-2 is a port of the Chart.js library for React.

It comes with various React components to let us add various kinds of graphs.

To install it, we run:

Then we can use it by writing:

The data has the data that we pass into the data prop.

It includes the labels property with the x-axis labels.

datasets has the datasets for the lines.

label has the content for the legends.

data has the y coordinates for the points.

fill set to true means we have the color between the line and the x-axis.

backgroundColor is the color for the fill.

borderColor has the color for the line.

We pass in the whole object as the value of the data prop in the Line component.

Also, we set the height with the height prop.

options has extra options like whether to maintain aspect ratio.

Many other kinds of charts like bars, doughnuts, scatter charts and more are supported.

Image for post
Image for post
Photo by Frank Busch on Unsplash

Conclusion

React Measure lets us get measurements of a given element.

ReactPlayer is a component that lets us embed videos from various sources.

react-chartjs-2 is a Chart.js port for React.

It can let us add many kinds of charts easily.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store