Skip to content

Instantly share code, notes, and snippets.

@RStankov

RStankov/data-component.js

Created August 23, 2017 19:32
Show Gist options
  • Save RStankov/ef63bd9c0a8572ee29ae6f14d4122f18 to your computer and use it in GitHub Desktop.
Save RStankov/ef63bd9c0a8572ee29ae6f14d4122f18 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data-component.js
/*
Render as html
<div data-component="Calendar" data-props="<%= json date: Date.today, maxDate: 1.week.from_now %>">
</div>
*/
// during page load
$(document).ready(() => {
$('[data-components]').each((i, el) => {
buildReact(el);
});
});
function buildReact(el) {
const Compnent = COMPONETS[$(el).data('component')];
const prop = $(el).data('props');
ReactDOM.render(<ReactWorld><Component {...prop} /></ReactWorld>, el);
}
// list of react exposed components
const COMPONETS = {
Calendar: () => <div>Calendar</div>
// ...
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment