RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/KtorZ/elm-react-component below:

KtorZPersonal/elm-react-component: (deprecated) A React component which wraps an Elm module to be used in a React application.

⚠ This module has been deprecated. Have a look at react-elm-components instead ! ⚠

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.

npm install --save elm-react-component

Basic

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

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')
)

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

Any ideas ? Feel free to open an issue !

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

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

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

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4