totes

React-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

Quick start (copy and paste)

``html



`

That's it. No build steps.️ 🎵

Example: setState and event handlers

`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

customElements.define("basic-example", BasicExample);
`

`html

`

Install from npm

`
yarn add @aaronshaf/totes --prod
`

Try it on Glitch

totes-example

Supported browsers

- [x] Chrome (without polyfill)
- [x] Firefox
- [x] Safari
- [x] Edge

$3

`html

`

Dev

git clone https://github.com/aaronshaf/totes.git

yarn global add serve

serve`

See also

- html-router - drop-in router
- dem - download ECMAScript modules