Component library based on web-components built using React and react-webcomponentify.

logo

Tip: You can inspect the custom elements using chrome devtools. Source maps are enabled hence you can even see source code of these components in action

List of components

1. component with react state: my-input

Custom element input field: Contains react state. Start typing to see:

Live demo:

Code:

import React from "react";
import { registerAsWebComponent } from "react-webcomponentify";
export class Input extends React.Component {
constructor(props) {
super(props);
this.state = { buttonText: "" };
this.onInputEnter = this.onInputEnter.bind(this);
}
onInputEnter(evt) {
this.setState({
buttonText: evt.target.value
});
}
render() {
return (
<div>
<input
style="width:200px;height:40px;padding:10px;font-size:14px;border:2px solid blue;"
type="text"
placeholder="enter some text here"
onChange={this.onInputEnter}
/>
<br />
<br />
<code>Value of this.state.buttonText: </code>
{this.state.buttonText}
</div>
);
}
}
registerAsWebComponent(Input, "my-input");
/*
In html:
<my-input></my-input>
*/
view raw my-input.js hosted with ❤ by GitHub

2. props passed via html attributes: my-button

Custom element button element that accepts props via html attributes. Check console log on click. Also, Try editing the attribute text with chrome inspector.

Live demo:

Code:

import React from "react";
import { registerAsWebComponent } from "react-webcomponentify";
export const Button = props => {
return (
<button
style="height:40px;font-weight:bold;"
id={props.id}
onClick={props.onClick}
>
{props.text || "Hello"}
</button>
);
};
registerAsWebComponent(Button, "my-button");
/*
In html:
<my-button></my-button>
or
<my-button id="my-custom-btn" text="my kickass button"></my-button>
and
<script type="text/javascript">
window.onload = function() {
var myBtn = document.getElementById("my-custom-btn");
myBtn.setProps({
onClick: function() {
console.log("my-button was clicked");
}
});
};
</script>
*/
view raw my-button.js hosted with ❤ by GitHub

3. child html elements passed to react: my-complex-component

child html elements can be passed to a custom element made with react. In this case those can be accessed via this.props.children as you would in a regular react app. Only caveat is that, since these child html elements are dom nodes we wrap them in a wrapper react component so that react can understand it.

Live demo:

Code:

import React from "react";
import { registerAsWebComponent } from "react-webcomponentify";
const MyComplexComponent = props => (
<div>
Kinda complex component 😂
<p>{props.text}</p>
<div>{props.children}</div>
</div>
);
registerAsWebComponent(MyComplexComponent, "my-complex-component");
/*
In html:
<my-complex-component text="component with children">
<p> I am a child element</p>
<div> I am another childish
<button>button</button>
</div>
</my-complex-component>
*/
view raw my-complex-component.js hosted with ❤ by GitHub