Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aaronshaf/totes
React-like web components
https://github.com/aaronshaf/totes
components lit-html react
Last synced: about 2 months ago
JSON representation
React-like web components
- Host: GitHub
- URL: https://github.com/aaronshaf/totes
- Owner: aaronshaf
- License: mit
- Created: 2018-08-08T17:05:05.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-10-17T05:33:27.000Z (almost 6 years ago)
- Last Synced: 2024-07-20T05:10:14.279Z (2 months ago)
- Topics: components, lit-html, react
- Language: JavaScript
- Homepage:
- Size: 277 KB
- Stars: 14
- Watchers: 4
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# totes
React-like web components. Powered by [lit-html](https://github.com/Polymer/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
import { html, Component } from "https://unpkg.com/@aaronshaf/totes@1/index.js";
class HelloWorld extends Component {
render() {
return html`<div>Hello, ${this.props.name}</div>`;
}
}customElements.define("hello-world", HelloWorld);
```
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``;
${this.props.message} ${this.state.name}
${this.state.toggled ? "On" : "Off"}
}
}customElements.define("basic-example", BasicExample);
``````html
```
## Install from npm
```
yarn add @aaronshaf/totes --prod
```## Try it on Glitch
[totes-example](https://glitch.com/edit/#!/totes-example?path=hello-world.html:1:0)
## Supported browsers
- [x] Chrome (without polyfill)
- [x] Firefox
- [x] Safari
- [x] Edge### Custom elements / Shadow DOM polyfill
```html
```
## Dev
`git clone https://github.com/aaronshaf/totes.git`
`yarn global add serve`
`serve`
## See also
- [html-router](https://github.com/aaronshaf/html-router) - drop-in router
- [dem](https://github.com/aaronshaf/dem) - download ECMAScript modules