Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
.eslintrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
package.json

README.md

REON NPM version Build Status Coverage Status

NPM

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