Skip to content

Instantly share code, notes, and snippets.

@TorbenKoehn
Created August 21, 2019 19:11
Show Gist options
  • Save TorbenKoehn/dec6a990950649b20c3b75017dc4f13a to your computer and use it in GitHub Desktop.
Save TorbenKoehn/dec6a990950649b20c3b75017dc4f13a to your computer and use it in GitHub Desktop.
react-ui.ts
<div data-component="HelloWorld" data-props='{"what": "World!"}'></div>
import { createElement } from 'react';
import { render } from 'react-dom';
function HelloWorld({ what }) {
return <h1>Hello {what}!</h1>;
}
const components = {
HelloWorld,
};
function initializeComponents() {
const elements = document.querySelectorAll('[data-component]');
for (const el of elements) {
const Component = components[el.dataset.component];
const props = el.dataset.props ? JSON.parse(el.dataset.props) : {};
render(createElement(Component, props), el);
}
}
addEventListener('DOMContentLoaded', initializeComponents);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment