Skip to content

Alternative JSX renderer. Creates plain DOM nodes instead of React objects.

Notifications You must be signed in to change notification settings

callumlocke/plain-jsx

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

plain-jsx

Alternative JSX renderer. Creates plain DOM nodes instead of React objects.

explanation/usage

JSX doesn't have to be used with React. If you add /** @jsx foo */ at the top of your script, the JSX transformer will use foo instead of React.createElement as your rendering function.

Use plainJSX as your rendering function and you'll get real elements that you can append directly to the DOM.

For example, if you put this through Babel (try it in the REPL):

/** @jsx plainJSX */

document.body.appendChild(
  <section>
    <h1>ABC</h1>

    <ul class="list">
      {['A', 'B', 'C'].map(letter => <li>{letter}</li>)}
    </ul>
  </section>
);

...you get this:

/** @jsx plainJSX */

document.body.appendChild(plainJSX(
  'section',
  null,
  plainJSX(
    'h1',
    null,
    'ABC'
  ),
  plainJSX(
    'ul',
    { 'class': 'list' },
    ['A', 'B', 'C'].map(function (letter) {
      return plainJSX(
        'li',
        null,
        letter
      );
    })
  )
));

For this output to run, you just need the plainJSX global to exist:

<script src="plain-jsx/index.js"></script>

It's a tiny function that returns real DOM elements, constructed using nothing but document.createElement, .setAttribute, .appendChild, document.createTextNode.

install

$ bower install --save plain-jsx

Or:

$ npm install --save-dev plain-jsx

Or you could just copy and paste the plainJSX function into your app.

status

Seems to work fine. But it could do with some tests – PRs welcome!

licence

MIT

About

Alternative JSX renderer. Creates plain DOM nodes instead of React objects.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published