Registry / testing / react-json-formatter

react-json-formatter

library0.4.0jsnpmunverified

A React component for formatting JSON data into interactive JSX with collapsible nodes and syntax highlighting. Version 0.4.0, last updated in 2021, low release cadence. Ships TypeScript types. Lightweight alternative to react-json-view; focuses on basic formatting without advanced features like search or edit. Note: this package has no README and appears unmaintained.

testing

npm install react-json-formatter

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-JSON-FORMATT

react-json-formatter

testingjavascriptv0.4.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

JsonFormatter

✓ import { JsonFormatter } from 'react-json-formatter'

Default export also available: import JsonFormatter from 'react-json-formatter'

default

✓ import JsonFormatter from 'react-json-formatter'

✗ const JsonFormatter = require('react-json-formatter')

CommonJS require returns the module object, not the component. Use default import.

ReactJsonFormatter

✓

✗ import { ReactJsonFormatter } from 'react-json-formatter'

No such export. Only exported symbol is JsonFormatter.

Basic usage: pass a JSON object to the JsonFormatter component to render collapsible JSON.

import { JsonFormatter } from 'react-json-formatter'; const sampleJson = { name: 'John', age: 30, skills: ['JavaScript', 'React'] }; function App() { return ( <div> <JsonFormatter json={sampleJson} /> </div> ); } export default App;

Debug

Known issues

gotchaComponent expects a plain JavaScript object; passing a JSON string will render without parsing.

fix

Parse the string before passing: <JsonFormatter json={JSON.parse(jsonString)} />

affects: >=0.0.0

gotchaNo props for customization (e.g., theme, indent width) are documented; styling is minimal.

fix

Override default styles via CSS classes or wrap the component in a styled container.

affects: >=0.0.0

deprecatedPackage has no README and appears unmaintained since 2021. May lack support for React 18+ features.

fix

Consider using react-json-view or react-json-view-lite as maintained alternatives.

affects: >=0.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'map')

Passing a JSON string instead of a parsed object.

fix

Parse the string with JSON.parse() before passing to the json prop.

Module not found: Can't resolve 'react-json-formatter'

Package not installed or missing from dependencies.

fix

Install via npm install react-json-formatter or yarn add react-json-formatter

Upgrade

Version history

0.4.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency; required for JSX rendering.

react-domrequiredPeer dependency; required for browser rendering.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/ronny1020/react-json-formatter ↗

packagereact-json-formatter ↗

homepagehttps://github.com/ronny1020/react-json-formatter#readme ↗