turbo-mount-react

Embed React components into Rails views using an islands architecture that automatically mounts and unmounts isolated widgets during Turbo navigation, preserving Hotwire as the foundation while preventing navigation breaks.

The best way to add interactive React widgets to a Hotwire application is using an islands architecture, which mounts isolated React components only where needed, such as for diagrams, data grids, and rich editors, without replacing Turbo navigation.

Pass Rails ActiveRecord data to React components by serializing objects into plain props and performing CSRF-aware fetches, ensuring secure data exchange between the React islands and the Rails backend.

Yes, you can configure React islands in a Rails project using either esbuild or Vite, which handles build tool configuration, component registration, and lazy loading of heavy bundles to optimize performance.

React components cause memory leaks during Turbo Drive navigation when they are not properly unmounted; using an automated islands architecture ensures correct mounting and unmounting lifecycle management during page transitions.

Yes, the islands architecture is compatible with Turbo Streams, allowing Rails to push reactive updates while the embedded React components manage their own internal state and interactions securely.