/react-stringify

A JSON.stringify() React component utility

Primary LanguageJavaScript

react-stringify

A JSON.stringify() React component utility

npm Build Status license code style: prettier semantic-release All Contributors

Motivation

When debugging or building examples for React component libraries, I often want to use a component to calls JSON.stringify() on the React props object, so I can display that object in the browser.

Installation

npm install react-stringify

Examples

See this CodeSandbox for an in-browser example.

Usage

Basic usage is as follows:

import React from 'react'
import ReactDOM from 'react-dom'
import Stringify from 'react-stringify'

const Example = props => <Stringify value={props} />

ReactDOM.render(<Example a={1} b={2} c={3} />, document.getElementById('app'))

// =>
//
// <pre>{
//   "a": 1,
//   "b": 2,
//   "c": 3
// }</pre>

As seen in the previous example, Stringify will stringify the value prop. If you don't pass it one, or value is undefined, it will return null (in other words, render nothing).

Stringify supports a space prop. The default is two spaces, but you could use tabs ('\t') or something like this if you're feeling wild:

<Stringify value={{ foo: 'foo', bar: 'bar' }} space="💩" />

// =>
//
// <pre>{
// 💩💩"foo": "foo",
// 💩💩"bar": "bar"
// }</pre>

By default, JSON.stringify() ignores functions. If you would like to stringify your object with functions, try the following replacer prop:

<Stringify
  value={{ foo: () => 'foo', bar: 'bar' }}
  replacer={(key, value) => {
    return typeof value === 'function' ? '[Function]' : value
  }}
/>

// =>
//
// <pre>{
//   "foo": "[Function]",
//   "bar": "bar"
// }</pre>

Stringify renders the output of JSON.stringify() in <pre> tag by default, but you can override this by supplying any of the following render props: component, render, or children. See the following example and/or the @macklinu/render-props README for more information.

<Stringify
  value={{ a: 1, b: 2, c: 3 }}
  render={string => {
    return (
      <div>
        <span>My Custom Render Function</span>
        <pre>{string}</pre>
      </div>
    )
  }}
/>

// =>
//
// <div>
//   <span>My Custom Render Function</span>
//   <pre>{
//     "foo": "foo",
//     "bar": "bar"
//   }</pre>
// </div>

API Reference

Stringify

This component accepts the following props, which are simply passed through to JSON.stringify():

  • value
  • replacer
  • space

The MDN JSON.stringify() parameter documentation explains what valid parameters types are and their default values.

The Stringify component also accepts the following render props:

  • component
  • render
  • children

See the @macklinu/render-props README documentation for more information.

Contributors

Thanks goes to these wonderful people (emoji key):


Macklin Underdown
💻 ⚠️ 📖

This project follows the all-contributors specification. Contributions of any kind welcome!