https://github.com/tb/react-rails-ujs

mounting components built with webpack (compatible with react-rails)
https://github.com/tb/react-rails-ujs

rails react rubyonrails webpack

Last synced: 17 days ago
JSON representation

mounting components built with webpack (compatible with react-rails)

• Host: GitHub
• URL: https://github.com/tb/react-rails-ujs
• Owner: tb
• License: apache-2.0
• Fork: true (reactjs/react-rails)
• Created: 2016-11-05T17:49:40.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-02-03T10:31:56.000Z (about 6 years ago)
• Last Synced: 2024-09-13T17:10:29.465Z (5 months ago)
• Topics: rails, react, rubyonrails, webpack
• Homepage:
• Size: 3.29 MB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-rails-ujs

[![npm version](https://badge.fury.io/js/react-rails-ujs.svg)](http://badge.fury.io/js/react-rails-ujs)

[![Downloads](http://img.shields.io/npm/dm/react-rails-ujs.svg)](https://npmjs.org/package/react-rails-ujs)

This npm package is replacement for [react-rails](https://github.com/reactjs/react-rails)

when assets pipeline is completely disabled and replaced with webpack bundles.

Created by [React Developers @ Selleo](https://selleo.com/react-expert-developers-team)

## Install

    npm i --save react-rails-ujs

Add react_component helper

    module ApplicationHelper

      def react_component(name, props = {}, options = {}, &block)

        html_options = options.reverse_merge(data: {

          react_class: name,

          react_props: (props.is_a?(String) ? props : props.to_json)

        })

        content_tag(:div, '', html_options, &block)

      end

    end

## Usage

Render components into rails views

    <%= react_component('Message', text: 'Hello react-rails-ujs') %>

Mount webpack bundled components

    import { mountComponents } from 'react-rails-ujs';

    

    import { Message } from './components/Message';

    

    mountComponents({

      Message,

    });

## Usage with React Hot Reload

    import React from 'react';

    import { AppContainer } from 'react-hot-loader';

    import { mountComponents } from 'react-rails-ujs';

    import { Message } from './components/Message';

    const render = (Component, props) => (

      

    );

    mountComponents({

      Message,

    }, module.hot ? { render } : {});

## Usage with Redux

    import React from 'react';

    import { Provider } from 'react-redux'

    import { mountComponents } from 'react-rails-ujs';

    import createStore from './store/createStore';

    import { Message } from './components/Message';

    const store = createStore();

    const render = (Component, props) => (

      

    );

    mountComponents({

      Message,

    }, { render });