Skip to content

Instantly share code, notes, and snippets.

@ccutch

ccutch/bindto.js

Last active February 26, 2018 22:54
Show Gist options
  • Save ccutch/f54dcbc52d68ded9edb42d05dbaf2151 to your computer and use it in GitHub Desktop.
Save ccutch/f54dcbc52d68ded9edb42d05dbaf2151 to your computer and use it in GitHub Desktop.
Download ZIP
React component binding to custom html elements. Use `npm install && npm run start` to run
Raw
bindto.js
import React from 'react'
import ReactDOM from 'react-dom'
export default (Component, tagname) => {
class Binder extends HTMLElement {
connectedCallback() {
const mountPoint = document.createElement('div');
this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
ReactDOM.render(<Component />, mountPoint);
}
}
customElements.define(tagname, Binder)
}
Raw
index.html
<!DOCTYPE html>
<my-component></my-component>
<!-- Can be before or after -->
<script src="./test-component.js"></script>
Raw
package.json
{
"name": "react-bindto",
"private": true,
"scripts": {
"start": "parcel index.html"
},
"author": "Connor McCutcheon",
"dependencies": {
"babel-plugin-transform-custom-element-classes": "^0.1.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"parcel-bundler": "^1.6.2",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}
Raw
test-component.js
import React from 'react'
import bindto from './bindto'
const MyComponent = () => (
<div>
<h1>Hello Component</h1>
</div>
)
bindto(MyComponent, "my-component")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment