Nascent Prototype Metaverse
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    reon-corepublic

    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

    install

    npm i reon-core

    Downloadsweekly downloads

    4

    version

    0.1.0

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar