{"library":"react-on-rails","title":"React on Rails Client-Side Integration","description":"react-on-rails is the client-side JavaScript package designed to integrate React applications seamlessly within a Ruby on Rails environment, specifically leveraging the Rails asset pipeline (e.g., Shakapacker, Webpack, Rspack). Currently at stable version 16.6.0, the library facilitates component registration, client-side hydration, and server-side rendering (SSR) of React components. It maintains an active release cadence with frequent updates and bug fixes, indicated by its minor and patch releases. Its primary differentiator is its tight coupling with the `react_on_rails` Ruby gem, providing a robust, opinionated solution for isomorphic React development in Rails. This includes essential functionalities like connecting React components to Redux stores and supporting advanced features such as server-side rendering, with specific capabilities for TanStack Router via its `react-on-rails-pro` offering. It's a foundational component for modern React-in-Rails development.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install react-on-rails"],"cli":null},"imports":["import ReactOnRails from 'react-on-rails';","import ReactOnRailsClient from 'react-on-rails/client';","import type { ReactOnRails } from 'react-on-rails/types';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactOnRails from 'react-on-rails';\n\ninterface HelloWorldProps {\n  name: string;\n}\n\nconst HelloWorld: React.FC<HelloWorldProps> = ({ name }) => {\n  return (\n    <div>\n      <h1>Hello from React, {name}!</h1>\n      <p>This component is registered with React on Rails.</p>\n    </div>\n  );\n};\n\n// This line registers the component for client-side and server-side rendering.\n// It makes 'HelloWorld' available to the `react_component` Rails helper.\nReactOnRails.register({ HelloWorld });\n\nconsole.log('HelloWorld component registered successfully.');\n","lang":"typescript","description":"This quickstart registers a simple 'HelloWorld' React component with `react-on-rails`, making it available for rendering within Rails views using the `react_component` helper, supporting both client-side hydration and server-side rendering.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}