Reacon - React component notation

Use reacon to compile a plain json object into a composite React component.

npm install reacon

Examples

import { reactify, inflater } from 'reacon';

const inflate = inflater({
  inliners: [],
  modifiers: [],
});

const inflated = inflate([
  {
    type: 'modifier',
    props: {
      resource: 'A',
    },
  },
  {
    type: 'div',
    props: {
      children: {
        {
          type: 'p',
          props: {
            children: 'This is a paragraf',
          },
        },
        {
          type: 'p',
          props: {
            children: 'TEMPLATE Interpolate with ${value}',
          },
        },
      },
    },
  },
]);

const Component = reactify(inflated);

return <Component value="props" />;

Will produce the following:

<div>
  <p>This is a paragraph</p>
  <p>Interpolate with data and props</p>
</div>

reactify can also be extended with custom components.

const MyComponent = ({ arg }) => {
  return <div>{arg}</div>;
};

const injectable = reactify({
  component: 'MyComponent',
  arg: 'Hello',
}, { MyComponent });

Which will produce:

<div>Hello</div>