https://github.com/macklinu/react-stringify
A JSON.stringify() React component utility
https://github.com/macklinu/react-stringify
react render-props stringify
Last synced: 9 months ago
JSON representation
A JSON.stringify() React component utility
- Host: GitHub
- URL: https://github.com/macklinu/react-stringify
- Owner: macklinu
- Created: 2018-01-26T18:20:07.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-29T16:11:38.000Z (almost 8 years ago)
- Last Synced: 2024-11-03T13:36:11.328Z (about 1 year ago)
- Topics: react, render-props, stringify
- Language: JavaScript
- Homepage: https://npm.im/react-stringify
- Size: 68.4 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-stringify
> A `JSON.stringify()` React component utility
[](https://npm.im/react-stringify)
[](https://travis-ci.org/macklinu/react-stringify)
[](https://github.com/macklinu/react-stringify/blob/master/LICENSE)
[](https://github.com/prettier/prettier)
[](https://github.com/semantic-release/semantic-release)
[](#contributors)
* [Motivation](#motivation)
* [Installation](#installation)
* [Examples](#examples)
* [Usage](#usage)
* [API Reference](#api-reference)
* [`Stringify`](#stringify)
* [Contributors](#contributors)
## Motivation
When debugging or building examples for React component libraries, I often want to use a component to calls [`JSON.stringify()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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](https://codesandbox.io/s/v6104mmnyl) for an in-browser example.
## Usage
Basic usage is as follows:
```js
import React from 'react'
import ReactDOM from 'react-dom'
import Stringify from 'react-stringify'
const Example = props =>
ReactDOM.render(, document.getElementById('app'))
// =>
//
//
{
// "a": 1,
// "b": 2,
// "c": 3
// }
```
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:
```js
// =>
//
//
{
// 💩💩"foo": "foo",
// 💩💩"bar": "bar"
// }
```
By default, `JSON.stringify()` ignores functions. If you would like to stringify your object with functions, try the following `replacer` prop:
```js
'foo', bar: 'bar' }}
replacer={(key, value) => {
return typeof value === 'function' ? '[Function]' : value
}}
/>
// =>
//
//
{
// "foo": "[Function]",
// "bar": "bar"
// }
```
`Stringify` renders the output of `JSON.stringify()` in `
` 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`](https://github.com/macklinu/render-props) README for more information.
```js
{
return (
My Custom Render Function
{string}
)
}}
/>
// =>
//
//
// My Custom Render Function
// {
// "foo": "foo",
// "bar": "bar"
// }
//
```
## API Reference
### `Stringify`
This component accepts the following props, which are simply passed through to [`JSON.stringify()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify):
* `value`
* `replacer`
* `space`
The [MDN `JSON.stringify()` parameter documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) 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`](https://github.com/macklinu/render-props#api-reference) README documentation for more information.
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
| [
Macklin Underdown](http://macklin.underdown.me)
[💻](https://github.com/macklinu/react-stringify/commits?author=macklinu "Code") [⚠️](https://github.com/macklinu/react-stringify/commits?author=macklinu "Tests") [📖](https://github.com/macklinu/react-stringify/commits?author=macklinu "Documentation") |
| :---: |
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!