https://github.com/futpib/preact-r-dom

r-dom-like Preact DOM wrapper (JSX alternative)
https://github.com/futpib/preact-r-dom

preact r react

Last synced: 19 days ago
JSON representation

r-dom-like Preact DOM wrapper (JSX alternative)

• Host: GitHub
• URL: https://github.com/futpib/preact-r-dom
• Owner: futpib
• License: mit
• Created: 2018-12-17T12:00:59.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-12-08T21:49:02.000Z (23 days ago)
• Last Synced: 2024-12-08T22:28:30.741Z (23 days ago)
• Topics: preact, r, react
• Language: JavaScript
• Homepage:
• Size: 101 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# preact-r-dom [![Build Status](https://travis-ci.org/futpib/preact-r-dom.svg?branch=master)](https://travis-ci.org/futpib/preact-r-dom)

Preact DOM wrapper. ([r-dom](https://github.com/uber/r-dom) fork for Preact).

## Usage

```js

var preact = require('preact');

var r = require('preact-r-dom');

var AnotherComponent = require('./another-component');

module.exports = class extends preact.Component {

  render() {

    return (

      r.div({className: 'example'}, [

        r.h1('Hello World!'),

        r.h2('This is React.js markup'),

        r(AnotherComponent, {foo: 'bar'}),

        r.div({

          classSet: { // Automatically use `classnames` module for classSet

            foo: this.props.foo,

            bar: this.props.bar

          },

          isRendered: this.props.foo // div won't render if isRendered is falsy

        })

      ])

    );

  }

};

```

## Documentation

#### `r[tag]([properties], [children])`

Returns a React element

- **tag** `String` - A React.DOM tag string

- **properties** `Object` *optional* - An object containing the properties you'd like to set on the element.

- **children** `Array|String` *optional* - An array of `r` children or a string. This will create child elements or a text node, respectively.

#### `r(component, [properties], [children])`

Returns a React element

- **component** `Function` - A React.js Component class created with `React.createClass`

- **properties** `Object` *optional* - An object containing the properties you'd like to set on the element.

- **children** `Array|String` *optional* - An array of `r` children or a string. This will create child elements or a text node, respectively.

#### Special Properties

- **isRendered** `"Boolean"` *optional* - If falsy, React will skip rendering the target component.

- **classSet** `Object` *optional* - Apply [classnames](https://www.npmjs.com/package/classnames) and assign to className.