lucky-react
v0.1.3
Published
Allows rendering React components in Lucky apps
Downloads
7
Readme
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 });
Then in your Lucky Page you can render your component by setting the data-react-class
and daata-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
def content
h1 "React Component"
react "Component", { message: "Message" } do
text "wrapped content"
end
end
end
Contributors
License
MIT