Minimount

Mount your React components using HTML elements

Motivation

You can already mount components in subsections of pages using ReactDOM.render, however then you need to include the call on every page, for every component. react-rails has the <%= react_component %> helper, which inserts the component into a subsection of the page declaratively, so I wanted to bring that to the non-Rails world.

Usage

<react-component component="Hello">
    <react-props>
     <react-prop key="name" value="user" />
    </react-props>
</react-component>

<script>
var component = React.createClass(/* ... */);
minimount.register('Hello', component);
</script>

By default, prop values will be passed as strings. If you want to pass a JavaScript object, you can tell minimount to eval it as such:

<react-component component="Hello">
    <react-props>
     <react-prop key="name" value="eval({ping: 'pong'})" />
    </react-props>
</react-component>

In this case, the eval() tells minimount to eval its contents. As you know, eval is evil, so use this carefully.

Getting started

Install it using yarn or npm

yarn add minimount

npm install --save minimount

Or use it from a CDN:

<script src="https://unpkg.com/[email protected]/lib/Minimount.min.js"></script>

Note

This is the initial release of minimount, and as such it may not be feature complete. If you have any feature ideas, feel free to leave an issue or PR.