MountPoint

An (extremely) simple gem for creating JS component mount points.

MountPoint facilitates transferring data from a Rails controller to a JavaScript component by creating an intermediate DOM node that stores data in a data-props attribute.

MountPoint creates uniform DOM nodes to mount JavaScript components, but it does not mount the components. To mount components to MountPoint nodes use rails-mount-point Node package.

<%= javascript_pack_tag 'sample' %>
<h1>Sample App</h1>

# Typically the "props" hash would be created as a controller instance variable
<%= mount_point('my_component_name', props: {toWho: 'World'}) %>

MountPoint gem does not handle mounting the JavaScript component. To mount components to MountPoint nodes use rails-mount-point Node package:

import React from "react";

const HelloWorld = props => {
  return <h1>Hello {props.toWho}</h1>;
};

export default Hello;

import mount from "rails-mount-point";
import HelloWorld from "../components/HelloWorld";

document.addEventListener("DOMContentLoaded", () => {
  mount(HelloWorld);
});

Add this line to your application's Gemfile:

gem 'mount_point'

And then execute:

$ bundle

Or install it yourself as:

$ gem install mount_point

MountPoint gem does not handle mounting the JavaScript component. To mount components to MountPoint nodes install rails-mount-point Node package:

Bug reports and pull requests are welcome on GitHub at https://github.com/westonkd/mount_point. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

The gem is available as open source under the terms of the MIT License.

Everyone interacting in the MountPoint project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.