elm-react-component

A component-wrapper to embed Elm modules in React.js


Keywords
elm, react, react-component, embedded, embed
License
MIT
Install
npm install elm-react-component@0.2.0

Documentation

Elm-React travis license

This component allows you to easily integrate an Elm module into an existing React application. This can be useful to slightly refactor a legacy code base or simply to just run some part of an application using Elm.

Installation

npm install --save elm-react-component

Examples

Usage

The component is a plain React component which means that it can be integrated like any other component.

  ReactDOM.render(
    <ElmReact name="Main" />,
    document.getElementById('app')
  );

The component requires at least one property name which is the name of your Elm module. So far, there's no dynamic loading; you have to include your Elm module and either make the Elm object be available in the global scope or supply it as a component's property.

Then, for each out-port, from Elm to React, you may pass as many on[PortName] properties as you need. Those properties should be functions -- or callback, triggered when a new message is spit out by the signal.

Any other property will be used as in-port from React to Elm to communicate. Each time a property is set with a new value, that value is sent to the corresponding port to the Elm module.

Check out the examples for more details, but basically:

property type description
name string Elm module's name
on{OutPort} function Subscriber / Handler for the given out port
{inPort} any Value to be sent through the module in port
[optional] elm object The Elm object dependency. If not supplied, looks for a global Elm
[optional] id string Id to assign to the Elm's div container
[optional] className string Class to assign to the Elm's div container

Example

Elm module 'Main'

import Graphics.Element exposing (..)
import Signal
import Mouse

main : Signal Element
main =
  Signal.map (\i -> flow right [show "in:", show i]) inPort

port inPort : Signal Int

port outPort : Signal Int
port outPort =
  Signal.map fst Mouse.position

React application

import React from 'react';
import ReactDOM from 'react-dom';

let App = React.createClass({
  getInitialState() {
    return { inPort: 0 }
  },

  log(e) {
    console.log("onOutPort:", e)
  },

  render() {
    setTimeout(() => {
      this.setState({ inPort: Date.now() })
    }, 50)

    return (
      <ElmReact
        name="Main"
        onOutPort={this.log}
        inPort={this.state.inPort}
      />
    )
  }
})

ReactDOM.render(
    <App />,
    document.getElementById('app')
)

TODO

  • Properly test the component
  • Explore some other use cases and real-life examples

Contributing

Any ideas ? Feel free to open an issue !

Change log

0.4.0 (2016-02-21)

  • Allow Elm object to be passed as a prop (where it was assumed to be globally accessible).

0.3.0 (2016-02-03)

  • Refactor example folder (now accessible on gh-pages)
  • Allow id and className to be passed as parameters

0.2.0 (2016-01-27)

  • Add binding for in-port through properties
  • Remove the need of an internal id

0.1.0 (2016-01-26)

  • First version, display an existing module and allow binding from Elm to React