Top React Libraries — JSON, Visibility, and Datetime

Image for post
Image for post
Photo by Fermin Rodriguez Penelas 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-json-view

react-json-view is library to let us render JSON with syntax highlighting on the screen.

To install it, we run:

Then we can use it by writing:

The ReactJson component lets us render JSON objects on the screen.

The src prop holds the JSON object to render.

Many options can be changed, including default value, styles, theme, icon styles, and more.

There’re also props for listening to add, edit, delete, select events, and more.

react-moment

react-moment is a useful library for letting us format dates.

To use it, we install it by running:

Then we can use it by writing:

The Moment component lets us format dates.

Wd can also pass in a Date instance:

We can set the interval so that the date updates at a given interval:

The interval value is in milliseconds.

The format can be changed with the format prop.

For example, we can write:

to format the date into YYYY/MM/DD format.

Dates can also be parsed and rendered:

We pass in the date format string to the parse prop to parse it.

Also, we can get relative time with the fromNow and ago props:

fromNow renders the relative time and ago removes the suffix from it.

We can do many more things with it like changing time zones, elements to render the string in, localization, and more.

React Visibility Sensor

The React Visibility Sensor component lets us detect when something goes out of the window viewport.

To install it, we run:

Then we can write:

to detect the visibility of the elements inside the VisibilitySensor component in the viewport.

The onChange function takes an isVisible parameter to let us know whether it’s visible or not.

We can change how it checks for visibility, including adding delays, throttling, offset, checking visibility for non-scrolling events, and more.

Image for post
Image for post
Photo by Nathalie SPEHNER on Unsplash

Conclusion

react-json-view renders JSON in our app.

react-moment lets us format time in our React app with moment.js.

React Visibility Sensor lets us watch for the visibility of elements.

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