package

github.com/mikeeus/lucky_react

0.1.0 / published Jul 30, 2018 / repository

Helper methods for rendering React components in Lucky using the lucky-react npm module

lucky_react

LuckyReact provides helper methods for rendering React components in Lucky apps that use the lucky-react package.

GitHub release Build Status

Installation

Add this to your application's shard.yml:

dependencies:
  lucky_react:
    github: mikeeus/lucky_react

Usage

Make sure you've installed lucky-react and added it to your app.

Then in a Lucky page you can include the LuckyReact module and use the react method.

require "lucky_react"

class Home::IndexPage < GuestLayout
  include LuckyReact

  def content
    react "Wrapper" do # with a block
      h1 "Nested Header"
    end

    messages = [
      { id: 1, sender: "me", text: "Hi" },
      { id: 2, sender: "Chatbot", text: "Hello! How can I help?" }
    ]

    react "Chat", { messages: messages } # with props
  end
end

The react method will render divs with [data-react-class=Component] and [react-data-class={"props": "props"}] attributes that are picked up by lucky-react .

Contributing

  1. Fork it (https://github.com/your-github-user/lucky_react/fork)
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request

Contributors

  • mikeeus Mikias Abera - creator, maintainer

API

  • LuckyReact

    Include in a Lucky page and call react to render divs with [react-data-class] and [react-data-props] attributes set that can be picked up by the lucky-react script.