Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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