Skip to content
Preact integration for Ruby on Rails
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
preact_ujs
.gitignore
README.md
preact-rails.gemspec

README.md

preact-rails

Preact integration for Ruby on Rails.

Getting started

  1. Add webpacker and preact-rails to your Gemfile
gem 'webpacker'
gem 'preact-rails'
  1. Install the gems by running bundle install
  2. Install the Preact UJS driver by running yarn add preact_ujs or npm i preact_ujs
  3. Include your Preact components in your application.js Update app/javascript/packs/application.js, add the following lines:
    var componentRequireContext = require.context("components", true);
    var PreactRailsUJS = require("preact_ujs");
    
    PreactRailsUJS.useContext(componentRequireContext)
    
  4. Create the directory app/javascript/components. That's where your Preact components will reside.
  5. Create your first Preact component - create the file app/javascript/components/Button.js and add the following lines:
    import { h, Component } from "preact"
    
    class Button extends Component {
      render (props, state) {
        return (
          <button className="button" type={props.type}>{props.label}</button>
        );
      }
    }
    
    export default Button
    
  6. Link the javascript Pack in Rails, add <%= javascript_pack_tag 'application' %> to app/views/layouts/application.html.erb
  7. Render your Preact component in a view
    <%= preact_component('Button', { type: 'submit', label: 'Get started!'}) %>
    
You can’t perform that action at this time.