https://github.com/jedirandy/elm-react

:leaves: Use Elm modules in you React app!
https://github.com/jedirandy/elm-react

elm javascript javascript-library react

Last synced: 18 days ago
JSON representation

:leaves: Use Elm modules in you React app!

• Host: GitHub
• URL: https://github.com/jedirandy/elm-react
• Owner: jedirandy
• License: mit
• Created: 2017-02-01T22:04:45.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-15T10:09:53.000Z (over 7 years ago)
• Last Synced: 2024-10-19T02:15:03.809Z (2 months ago)
• Topics: elm, javascript, javascript-library, react
• Language: JavaScript
• Homepage:
• Size: 68.4 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Elm React

[![Build Status](https://travis-ci.org/jedirandy/elm-react.svg?branch=master)](https://travis-ci.org/jedirandy/elm-react)

[![npm module](https://badge.fury.io/js/elm-react.svg)](https://www.npmjs.org/package/elm-react)

A library for using Elm modules in your React components

## Install

```sh

npm install elm-react

```

## Usage

```javascript

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 (

            


                 handleClick()}>Click me

                { renderElm({ flags: {} }) }

            

        )

    }


    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](/example) 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