React-like web components
npm install @aaronshaf/totesReact-like web components. Powered by lit-html.
Supports:
- [x] setState
- [x] render
- [x] componentDidMount
- [x] shouldComponentUpdate
- [x] getSnapshotBeforeUpdate
- [x] component[Did]Unmount
- [x] componentDidUpdate
- [x] getDerivedStateFromProps
- [x] this.props.children
``html
`
That's it. No build steps.️ 🎵
`javascript
export default class BasicExample extends Component {
static get observedAttributes() {
return ["message"];
}
constructor() {
super();
this.state = {
name: "Aaron",
toggled: false
};
}
handleInput(event) {
this.setState({ name: event.target.value || "Aaron" });
}
handleClick() {
this.setState({ toggled: this.state.toggled === false });
}
render() {
return html
${this.props.message} ${this.state.name}
;
}
}customElements.define("basic-example", BasicExample);
``html
`Install from npm
`
yarn add @aaronshaf/totes --prod
`Try it on Glitch
Supported browsers
- [x] Chrome (without polyfill)
- [x] Firefox
- [x] Safari
- [x] Edge
$3
`html
`Dev
git clone https://github.com/aaronshaf/totes.gityarn global add serveserve`- html-router - drop-in router
- dem - download ECMAScript modules