react-dom-wrapper

react-dom-wrapper

Convert an array of element data to react elements. Prettier than JSX, less verbose than using React.DOM directly. Inspired by (though not as pretty as) Hiccup.

Installation

$ npm install [--save] react-dom-wrapper

Usage

var DOM = require('react-dom-wrapper');

var element = DOM([
    'div#wrapper',
    { className: 'asd' },
    ['span.message.important', 'hello', ['span.bold', name]],
    [CustomComponent, { customProp: 'hello' }],
    [
        'ul',
        arrayOfThings.map(function(thing) {
            return ['li', { key: thing.id }, thing.value]
        })
    ]
]);

React.render(element, mountNode);

Using a custom React

If you want to use a different version of React entirely, you can do var DOM = require('react-dom-wrapper/react-dom-wrapper')(myCustomReact).

Element spec

An element is an array consisting of:

• Element type (string or React component)
• Optional props object
• Zero or more children (string, element spec, React element, or an array (can even be nested) of any of those)

Testing

There are test! Buster is used. npm test runs the test, npm run autotest watches the files and runs tests automatically.

License

MIT