Elm React

A library for using Elm modules in your React components

Install

npm install elm-react

Usage

import React from 'react'
import { inject } from 'elm-react'
import { ElmModule } from './ElmModule.elm'

class App extends React.Component {
    render() {
        const { renderElm, handleClick } = this.props;
        return (
            <div>
                <button onClick={() => handleClick()}>Click me</button>
                { renderElm({ flags: {} }) }
            </div>
        )
    }

    onScroll(args) {
        // ...
    }
}

inject(
    // Elm module to be used
    ElmModule,
    // options
    {
        send: {
          'click': 'handleClick' // Pass 'handleClick' to App's props, which is bound with the 'click' port of ElmModule for sending messages
        },
        subscribe: {
          'scroll': 'onScroll' // subscribe to the 'scroll' port, use 'onScroll' as callback
        },
        as: 'renderElm' // renderElm will be available in App's props, to render ElmModule
    }
)(App)

Check out this project for a working example!

API

inject(module, options)(component)

• module: the Elm module to be injected into the React component

• options (object)

  • send (object) Each key-value pair is a mapping from the Elm module's port, to the function name that will be passed to the React component's props, that function can be used to send a message to that port

  • subscribe (object) Subscribe to an Elm port, each key-value pair is a mapping from the Elm module's port name to the callback name of the React Component

  • as (string) the name of the render method to be injected into the React component's props

• component (React Component): the React component into which the Elm module is injected