react-on-rails

The client-side JavaScript package for React on Rails — the integration layer between Rails and React. This package handles component registration, client-side hydration, and server-side rendering support.

Installation

npm install react-on-rails
# or
yarn add react-on-rails
# or
pnpm add react-on-rails

Using React on Rails Pro? Install react-on-rails-pro instead. The Pro package re-exports everything from this package plus Pro-exclusive features. The react_on_rails_pro gem requires the Pro npm package.

Quick Start

Register Components

import ReactOnRails from 'react-on-rails';
import HelloWorld from './HelloWorld';

// Register components so Rails views can render them
ReactOnRails.register({ HelloWorld });

Use in Rails Views

<%# app/views/hello_world/index.html.erb %>
<%= react_component("HelloWorld", props: { name: "World" }, prerender: true) %>

Server-Side Rendering

For SSR, create a server bundle entry that registers the same components:

// app/javascript/packs/server-bundle.js
import ReactOnRails from 'react-on-rails';
import HelloWorld from '../src/HelloWorld';

ReactOnRails.register({ HelloWorld });

API

ReactOnRails.register(components)

Register React components for use in Rails views.

ReactOnRails.register({
  HelloWorld,
  UserProfile,
  Dashboard,
});

Render Functions

For advanced SSR control, register render functions instead of components:

ReactOnRails.register({
  MyApp: (props, railsContext) => {
    return { renderedHtml: '<div>...</div>' };
  },
});

Exports

| Export Path | Description | | ----------------------- | ----------------------------------- | | react-on-rails | Full build with SSR utilities | | react-on-rails/client | Client-only build (smaller, no SSR) | | react-on-rails/types | TypeScript type exports |

Rails-Side Setup

This npm package works with the react_on_rails Ruby gem:

# Gemfile
gem "react_on_rails"

Use the generator for automated setup:

rails generate react_on_rails:install

Documentation

• Getting Started
• Installation Guide
• API Reference
• Configuration

License

See LICENSE.md.