react-plain

React-plain - helper functions for creating DOM elements in React without JSX

Table of contents

1. Overview
2. Installation
3. Quick example
4. API
5. License

Overview

This package contains utility functions for creating React HTML elements, without using JSX. It wraps React.createElement in dedicated functions for each html tag, so you have shorter syntax and IDE suggestions.

Installation

Using NPM:

npm i react-plain

Using Yarn:

yarn add react-plain

Quick example

/**
 * You can also use default import, for example:
 *   import tags from 'react-plain
 *   import t from 'react-plain'
 */
import { __, a, div, h1, p } from 'react-plain'

const Hello = () => {
  return h1(__, 'Hello React without JSX!')
}

const App = () => {
  return div({ class: 'example' },
    Hello(),
    p(__, 'Simply use html tags as functions!'),
    p(__, 'You can use __ instead of null'),
    p(__,
      'Check out the project repo: ',
      a({ href: '//github.com/caderek/react-plain' }, 'click'),
    ),
  )
}

Live example: https://stackblitz.com/edit/react-plain-example

API

API is very simple, instead of:

React.createElement('tag', props, ...children)

you get:

tag(props, ...children)

Additionally, the library exports __ constant, which is just null, to use as a handy alternative for empty props.

License

Project is under open, non-restrictive ISC license.

This site is open source. Improve this page.