REON

REON (React Element Object Notation) is a data-interchange format inspired by React elements and JSON.

Installation

# npm
npm install reon-core

# yarn
yarn add reon-core

Usage

First import the module:

// ES5
var REON = require('reon-core');

// ES6
import REON from 'reon-core';

REON.stringify()

The REON.stringify() method converts a ReactElement to a JSON string, optionally replacing values if a replacer function is specified.

Syntax:

REON.stringify(ReactElement[, replacer]);

Parameters:

1. ReactElement (required): The ReactElement to convert to a JSON string.
2. replacer (optional): A function that alters the behavior of the stringification process.

Examples:

Using REON.stringify():

REON.stringify(
  React.createElement('p', { className: 'classy' }, 'text')
);
// '{"type":"p","props":{"className":"classy","children":"text"}}'

Using the replacer parameter:

REON.stringify(
  React.createElement('p', { className: 'classy' }, 'text'),
  function(key, value) {
    // passing in a replacer parameter will override the default replacer,
    // which removes object keys like `ref`, `_owner`, `_store`
    if (/^ref$|^_.+/.test(key)) return;

    if (value === 'classy') {
      return 'sophisticated'; // return replaced value
    }
    return value; // return everything else unchanged
  }
);
// '{"type":"p","props":{"className":"sophisticated","children":"text"}}'

REON.parse()

The REON.parse() method parses a string as ReactElement, optionally transforming the value producted by parsing.

Syntax:

REON.parse(text[, reviver]);

Parameters:

1. text (required): The string to parse as ReactElement.
2. reviver (optional): A function that prescribes how the value originally produced by parsing is transformed, before being returned.

Examples:

Using REON.parse():

REON.parse(
  '{"type":"p","props":{"className":"classy","children":"text"}}'
);
// React.createElement('p', { className: 'classy' }, 'text');

Using the reviver parameter:

REON.parse(
  '{"type":"a","props":{"href":"http://foo.bar","children":"link"}}',
  function(key, value) {
    if (key === 'href' && value === 'http://foo.bar') {
      return 'http://baz.qux'; // return different href
    }
    return value; // return everything else unchanged
  }
);
// React.createElement('a', { href: 'http://baz.qux' }, 'link');

REON.parseObject()

The REON.parseObject() method converts a JavaScript object into ReactElement.

Syntax:

REON.parseObject(object);

Parameters:

1. object (required): The object to convert into ReactElement.

Examples:

Using REON.parseObject():

REON.parseObject({
  type: 'p',
  props: {
    className: 'classy',
    children: 'text'
  }
});
// React.createElement('p', { className: 'classy' }, 'text');

Testing

# npm
npm test
npm run lint

# yarn
yarn test
yarn run lint

Thanks

To all the contributors.

License

MIT