Lucky React

Lucky is awesome, react is too. This package makes it easy to define and render react components in your Lucky applications.

Installation

Make sure you have react and react-dom installed in your project.

Then install lucky-react with npm.

npm install lucky-react

or yarn

yarn add lucky-react

Usage

First make sure Laravel mix is configured to handle react.

// webpack.mix.js
mix
  .react("src/js/app.js", "public/js") // instead of .js(...)

Then in your app's main JavaScript file, which is src/js/app.js by default, import LuckyReact and your React components, and register them with LuckyReact.register({ Component }).

// src/js/app.js
...
import LuckyReact from "lucky-react";
import { Component } from './components';

LuckyReact.register({ Component });

This syntax uses JavaScript's destructuring assignment and is equivalent to:

LuckyReact.register({ 'Component': Component });

Rendering on a Lucky Page

You can render components in your Lucky pages by setting the data-react-class and data-react-props attributes on an element.

class Home::IndexPage < GuestLayout
  def content
    h1 "React Component"
    div "data-react-class": "Component",
        "data-react-props": { message: "Message" }.to_json do
      text "wrapped content"
    end
  end
end

If you have the lucky_react shard installed you can do this instead.

class Home::IndexPage < GuestLayout
  include LuckyReact # include the module

  def content
    h1 "React Component"

    react "Component", { message: "Message" } do # call `react`
      text "wrapped content"
    end
  end
end

Contributors

Mikias Abera

License

MIT