Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/callwait/babel-plugin-react-hiccup

Hiccup syntax instead of JSX for React with Babel
https://github.com/callwait/babel-plugin-react-hiccup

Last synced: 3 months ago
JSON representation

Hiccup syntax instead of JSX for React with Babel

Awesome Lists containing this project

README

        

# babel-plugin-react-hiccup

[![npm](https://img.shields.io/npm/v/babel-plugin-react-hiccup.svg)](https://www.npmjs.com/package/babel-plugin-react-hiccup)

*Hiccup syntax for React components with Babel.*

*React Native ready.*
![Alt text](rn-demo.png?raw=true "React Native ready")

## Example

**Input**
```js
const element = ['h1', "title"]
const element = ['h2#myId.myClass', "title"]
const element = ['h3.foo', {className: 'bar'}];

const nested = ['div',
['p.first', "first paragraph"],
['p.second', "second paragraph"]
];

const component = [MyComponent, {open: true, good: "yes", parent: this.parent}];
```

**Same as**
```js
const element =

title


const element =

title
const element =

const nested = (


first paragraph


second paragraph


)

const component =

```

**Output**
```js
const element = React.createElement('h1', {}, "title");
const element = React.createElement('h2', {id: 'myId', className: 'myClass'}, "title");
const element = React.createElement('h3', {className: 'foo bar'});

const nested = React.createElement('div', {},
React.createElement('p', {className: 'first'}, "first paragraph"),
React.createElement('p', {className: 'second'}, "second paragraph")
);

const component = React.createElement(MyComponent, { open: true, good: "yes", parent: this.parent });

```

## Installation

```
npm i babel-plugin-react-hiccup
```

## Usage

### Via .babelrc

__.babelrc__
```json
{
"plugins": ["react-hiccup"]
}
```

### Via CLI
```
babel --plugins react-hiccup script.js
```

### Via Node API
```js
require("babel-core").transform("code", {
plugins: ["react-hiccup"]
});
```

## License
MIT