https://github.com/aaronshaf/totes

React-like web components
https://github.com/aaronshaf/totes

components lit-html react

Last synced: 28 days 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 (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-17T05:33:27.000Z (over 5 years ago)
• Last Synced: 2024-05-18T17:21:56.373Z (about 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

Lists

• awesome-stars - totes - like web components | aaronshaf | 14 | (JavaScript)

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