React-data-markup NPM

react-data-markup

Write React.js markup with arrays & objects, inspired by react-hyperscript and rum.

Importing

import DataMarkup from 'react-data-markup'; // ES6
var DataMarkup = require('react-data-markup'); // ES5 with npm

If you prefer a tag, you can get it from window.DataMarkup global:

<!-- development version -->
<script src="https://unpkg.com/react-data-markup/react-data-markup.js"></script>

Form syntax

[<tag-n-function>, <props>?, <children>*, ...]

\<tag-n-function> String|Object - function, component, or string in a format 'tag#id.class'
\<props> Object (optional) - An object containing the props you'd like to set on the element
\<children> Array - Zero or more forms or a strings. This will create child elements or a text node, respectively.

Usage

var DataMarkup = window.DataMarkup;    

// Use `DataMarkup.wrapFunction` for functional components
var FunctionalComponent = DataMarkup.wrapFunction(function(props) {
  return (
    ['p', props.x * 2]
  )
});

// Use `DataMarkup.createClass` to get `render` automatically wrapped
var AnotherComponent = DataMarkup.createClass({
  render: function() {
    return ['p', 'Hello world!', this.props.children]            
  }
});

var MainComponent = DataMarkup.createClass({
  render: function render() {
    return (
        ['.example',
            ['h1#heading', 'These are arrays'],
            ['h2', 'creating React.js markup'],
            [FunctionalComponent, {x: 5}],
            [AnotherComponent, {foo: 'bar'},
                ['li', {href: 'http://whatever.com'}, 'One list item'],
                ['li', 'Another list item']
            ]    
        ]
    );                    
  }
});