Top React Libraries — JSON, Visibility, and Datetime

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:

npm i react-json-view

Then we can use it by writing:

import React from "react";
import ReactJson from "react-json-view";
const App = () => {
  return (
    <>
      <ReactJson src={{ foo: "bar", baz: 1 }} />
    </>
  );
};
export default App;

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:

npm i react-moment moment