Last active
February 26, 2018 22:54
-
-
Save ccutch/f54dcbc52d68ded9edb42d05dbaf2151 to your computer and use it in GitHub Desktop.
React component binding to custom html elements. Use `npm install && npm run start` to run
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<my-component></my-component> | |
<!-- Can be before or after --> | |
<script src="./test-component.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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