JsonRecordViewer

The JsonRecordViewer component displays JSON data that is passed to it.

Installation

bash

npm i @anakin-gbit/json-record-viewer

Example Usage

JSX

<JsonRecordViewer
  title="User Data"
  data={{
    name: 'John Doe',
    age: 30,
    dateRange: { start: new Date(), end: new Date().toISOString() },
    location: { state: 'New York', city: 'New York' },
    hobbies: ['Reading', 'Writing'],
  }}
/>

User Data

{

name: "John Doe",

age: 30,

dateRange: {

start: 2025-12-15T12:44:26.014Z,

end: 2025-12-15T12:44:26.014Z

location: {

state: "New York",

city: "New York"

hobbies: [

"Reading",

"Writing"

]

}

Props

title: Type: string | Default: 'Record Viewer'
Custom title displayed at the top of the viewer.
data: Type: object | array | Required | Default: Default error message if no data is provided.
JSON data to display. Must be an object or an array.