https://github.com/obsius/react-object-exhibitor
Dead simple, CSS customizable, JSON / JS object viewer.
https://github.com/obsius/react-object-exhibitor
Last synced: 5 months ago
JSON representation
Dead simple, CSS customizable, JSON / JS object viewer.
- Host: GitHub
- URL: https://github.com/obsius/react-object-exhibitor
- Owner: obsius
- License: mit
- Created: 2022-08-04T16:23:10.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-30T04:54:06.000Z (over 1 year ago)
- Last Synced: 2025-10-04T09:13:00.736Z (9 months ago)
- Language: JavaScript
- Size: 38.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Object Exhibitor
Dead simple, CSS customizable, JSON / JS object viewer.
## Example
```js
// use react 18 for example
import React from 'react';
import ReactDomClient from 'react-dom/client';
import ObjectExhibitor from 'react-object-exhibitor';
import 'react-object-exhibitor/lib/index.css';
// optionally override default styles
// import './my-react-object-exhibitor-style-override.css';
let obj = {
undefined: undefined,
null: null,
boolTrue: true,
boolFalse: false,
string: 'string',
number: 100,
set: new Set([1, 2, 3]),
map: new Map([['a', 'a'], ['b', 'b'], ['c', 'c']]),
regexp: new RegExp(/^.*$/, 'i'),
date: new Date(),
array: ['hello', 100, false],
typedArray: new Float32Array([3.2, 6.4, 10.24]),
object: {
childArray: [],
childObject: {
childChildObject: {
key: 'value'
}
}
}
};
ReactDomClient.createRoot(document.body).render(
);
```
## Customization
Override the class names found in the css folder.
## Dependencies
- React
## TODO
- Missing types: map, set, etc
- Additional default stylings
## Contributing
Feel free to make changes and submit pull requests whenever.
## License
`react-object-exhibitor` uses the [MIT](https://opensource.org/licenses/MIT) license.