README
react-ecmason-view
React component for inspecting modern ES objects
Install
npm install --save react-ecmason-view
yarn add react-ecmason-view
Usage
import { View } from 'react-ecmason-view';
// Supports Map
const a = new Map([
// Supports RegExp and Date
[/Hello World/, new Date()],
// Supports Promise and Functions
[Promise.resolve(), function exampleCallback() {}],
]);
// Support for plain objects
const object = {
a,
// Support for Set
b: new Set([
// Support for NaN
NaN,
// Support for undefined
undefined,
// Support for infinity
Infinity,
-Infinity,
]),
c: [
// Support for signed zeroes
-0,
null,
],
// Support for Errors
d: new SyntaxError('This is an error'),
};
// Support for recursion
a.set('recursive', object);
// Create our inspector
<View
value={object}
/>
Features
Modern ES Objects Parser
react-ecmason-view
uses ecmason
to serialize objects and display their values in context. On top of the current features of ecmason
, react-ecmason-view
adds custom transformers to be able to display functions and Promises.
Base16 Schemes
react-ecmason-view
uses base16-ts
as a peer dependency for the color scheme of the component.
You can install base16-ts
to gain access to more themes.
yarn add base16-ts
import { schemes } from 'base16-ts'
<View
theme={schemes.monokai}
/>
SSR
react-ecmason-view
uses cxs
to generate dynamic classes. You can import styles
from react-ecmason-view
to pre-render classes specially on ReactSSR.
import { styles } from 'react-ecmason-view';
// Ensure cache is free
styles.reset();
const html = ReactDOMServer.renderToString(<App />)
const css = styles.render()
const doc = `<!DOCTYPE html>
<style>${css}</style>
${html}
`
// Reset the cache for the next render
styles.reset()
Custom Tags
To be added.
Prior Art
License
MIT © lxsmnsyc