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

• Host: GitHub
• URL: https://github.com/callwait/babel-plugin-react-hiccup
• Owner: callwait
• License: mit
• Created: 2018-09-11T07:31:20.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T05:07:02.000Z (over 1 year ago)
• Last Synced: 2024-07-20T11:14:36.957Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 2.55 MB
• Stars: 17
• Watchers: 2
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-babel - react-hiccup - Hiccup syntax for React components. (Plugins / React)

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