https://github.com/posthtml/posthtml-jsx
JSX Renderer
https://github.com/posthtml/posthtml-jsx
Last synced: 10 months ago
JSON representation
JSX Renderer
- Host: GitHub
- URL: https://github.com/posthtml/posthtml-jsx
- Owner: posthtml
- License: mit
- Created: 2016-08-15T14:11:37.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-12-25T13:17:03.000Z (about 7 years ago)
- Last Synced: 2024-10-29T21:06:06.289Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[![NPM][npm]][npm-url]
[![Deps][deps]][deps-url]
[![Tests][build]][build-url]
[![Coverage][cover]][cover-url]
[![Standard Code Style][style]][style-url]
[![Chat][chat]][chat-badge]
# PostHTML JSX 
## Install
```bash
npm i -D posthtml-jsx
```
## Usage
```js
posthtml(plugins)
.process(html, { render: jsx(options) })
.then(({ html }) => console.log(html))
```
## Options
**`type`:** `{String}`: Type of the Component ( es5 || es2015 || stateless )
**`name`:** `{String}`: Name of the Component
**`props`:** `{String|Array}`: Props of the Component
**`export`:** `{Boolean}`: Export Component JS Module (true || false)
## Example
```js
import { readFileSync, writeFileSync } from 'fs'
import posthtml from 'posthtml'
import jsx from 'posthtml-jsx'
const html = readFileSync('./index.html', 'utf8')
posthtml()
.process(html, {
render: jsx({
type: 'es2015'
name: 'Test'
props: ['prop', '{ prop }', '...props']
export: true
})
})
.then((result) => writeFileSync('./Test.jsx', result.html, 'utf8'))
```
```html
{content}
```
```js
import { Component } from 'react'
class Test extends Component {
render (prop, { prop }, ...props) {
return (
{test.content}
)
}
}
export default Test
```
## Maintainers
## Contributing
See [PostHTML Guidelines](https://github.com/posthtml/posthtml/tree/master/docs) and [CONTRIBUTING](CONTRIBUTING.md).
## LICENSE
[MIT](LICENSE)
[npm]: https://img.shields.io/npm/v/posthtml-jsx.svg
[npm-url]: https://npmjs.com/package/posthtml-jsx
[deps]: https://david-dm.org/posthtml/posthtml-jsx.svg
[deps-url]: https://david-dm.org/posthtml/posthtml-jsx
[build]: http://img.shields.io/travis/posthtml/posthtml-jsx.svg
[build-url]: https://travis-ci.org/posthtml/posthtml-jsx
[cover]: https://coveralls.io/repos/github/posthtml/posthtml-jsx/badge.svg?branch=master
[cover-url]: https://coveralls.io/github/posthtml/posthtml-jsx?branch=master
[style]: https://img.shields.io/badge/code%20style-standard-yellow.svg
[style-url]: http://standardjs.com/
[chat]: https://badges.gitter.im/posthtml/posthtml.svg
[chat-badge]: https://gitter.im/posthtml/posthtml?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge"
