Appfairy-React

A patch on top of React for Appfairy/React apps.

With React

import Appfairy from 'appfairy'
import ReactDom from 'react-dom'
import React from 'react'

class MyComponent extends React.Component {
  button = React.createRef()

  render() {
    return (
      <af-my-element-view>
        <af-proxy
          af-plug="button"
          ref={this.button}
          history={new Appfairy.Reference(this.props.history)}
          onClick={this.handleClick}
        />
      </af-my-element-view>
    )
  }

  handleClick = (e) => {
    e.nativeEvent.origin.preventDefault()

    console.log(this.button.current.afSocket, 'clicked')
  }
}

class MyElement extends Appfairy.Element(HTMLElement) {
  render(container, props) {
    return ReactDOM.render(
      <MyComponent {...props} />
    , container)
  }
}

Appfairy.Element.define('my-element', Element)

With Appfairy-React

import React from 'appfairy-react'

@React.Element('my-element')
class MyComponent extends React.Component {
  button = React.createRef()

  render() {
    return (
      <af-my-element-view>
        <af-proxy
          af-plug="button"
          ref={this.button}
          history={this.props.history}
          onClick={this.handleClick}
        />
      </af-my-element-view>
    )
  }

  handleClick = (e) => {
    e.nativeEvent.preventDefault()

    console.log(this.button.current, 'clicked')
  }
}

patch()

Rather than import appfairy-react all the time, you can just use the patch() method and then use react as usual:

// main module
import AppfairyReact from 'appfairy-react'

AppfairyReact.patch()

// any other module which uses jsx
import React from 'react'