Skip to content
Another one markup library for React.js
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
test
.gitignore
.npmignore
.travis.yml
LICENSE.txt
README.md
package.json

README.md

react-markup

Build Status

Another one markup library for React.js inspired by hyperscript. It allows use valid JavaScript code instead of JSX, like this:

import {h} from 'react-markup'

h("div",
    h("div#header.highlighted.hover",
        h("div.title", "People List")
    ),
    h("div.body", people.map( person => (
        h("div.person", {key:person.id}, person.name)
    ))),
    h("div#footer.hidden", "(footer content)")
)

// which analogue in JSX is:
<div>
    <div id="header" className="highlighted hover">
        <div>People list</div>
    </div>
    <div className="body">
        {
            people.map( person => (
                <div className="person" key={person.id}>{person.name}</div>
            )))
        }
    </div>
    <div id="footer" className="hidden">(footer content)</div>
</div> 

Installation

npm install --save react-markup

Motivation

Facebook developers encourage everybody use JSX in React code. However, this approach has several disadvantages:

  • a lot of IDE's and text editors, which support JS syntax, work bad with JSX syntax

  • it could be harder to properly set up your build process to transpile from JSX and from ES6 at the same time

  • some people think, that mix of JS and JSX is harder to read

Advantages

This library was inspired by different hyperscript-like libraries, including react-hyperscript and
virtual-hyperscript, but it has several advantages:

  • it is possible to pass child elements as array and as varargs, and semantic of these methods corresponds to React.createElements semantics (e. g. it requires to pass key property for children, passed as array);

  • it doesn't mutate properties (which is not true for react-hyperscript);

  • it faster than analogues.

More examples

Simple element:

// JSX
<div>Text content</div>

// react-markup
h('div', 'Text content')
// ...or
div('Text content')

Div with class and id

// JSX
<div className='highlighted' id='header'>
    Text content
</div> 

// react-markup
h('div#header.highlighted', 
    'Text content'
)

Passing children as varargs

// JSX
<div className='container'>
    <div>Header</div>
    <div>Body</div>
</div> 

// react-markup
h('div.container', 
    h('div', 'Header'),
    h('div', 'Body'),
)

Passing children as array

// JSX
<div className='container'>
    {
        items.map(x => (
            <div key={x.id}>{x.title}<div>
        ))
    }
</div> 

// react-markup
h('div.container', items.map(x => (
    h('div', {key:x.id}, x.title)
)))
You can’t perform that action at this time.