https://github.com/dperrymorrow/mini-reactive

a reactive component lib in under 45 lines of JS
https://github.com/dperrymorrow/mini-reactive

Last synced: about 1 year ago
JSON representation

a reactive component lib in under 45 lines of JS

• Host: GitHub
• URL: https://github.com/dperrymorrow/mini-reactive
• Owner: dperrymorrow
• Created: 2022-12-21T20:24:45.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-04T16:58:38.000Z (almost 2 years ago)
• Last Synced: 2025-03-27T23:12:38.433Z (about 1 year ago)
• Language: JavaScript
• Homepage: https://dperrymorrow.github.io/mini-reactive/
• Size: 31.3 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# mini-reactive

a reactive component lib in under 80 lines of JS!

- [Working example here](https://dperrymorrow.github.io/mini-reactive/)

- [Example component](https://github.com/dperrymorrow/mini-reactive/blob/main/Todos.js)

## Example Component

```javascript

import Component from "./lib/Component.js";

export default class MyComponent extends Component {

  constructor() {

    super(...arguments);

    this.state = this.useState({

      name: "Dave",

    });

  }

  updateTitle(ev) {

    this.state.title = ev.target.value;

  }

  render() {

    return `
${this.state.title}

      `;

  }

}

```


## Example Usage

```html



  import App from "./MyComponent.js";

  const $root = document.getElementById("app");

  $root.innerHTML = new App($root).render();

```

## To run the example here

1. clone this repo

1. cd into directory

1. `npm install`

1. `npm run dev`

1. go to localhost:8000 in your browser