@rhtml/hooks

@rhtml/hooks

Installation

npm i @rhtml/hooks

Usage

import { LitElement, Component, html } from '@rxdi/lit-html';
import { useState } from '@rhtml/hooks';

interface MonadState { myState: boolean }

@Component({
  selector: 'r-html-view',
  template(this: RHtmlViewComponent) {
    return html`
      <r-part>
        <r-state .value=${{ myState: false }}></r-state>
        <r-render .state=${(s, setMonadState: (s: MonadState) => void) => {
          const [state$, setState, getState] = useState({ myState2: false });
          const state = getState();
          return html`
            <p>${state.myState2}</p>
            <p>${s.myState}</p>
            <button @click=${() => setState({ myState2: true })}>setHookState</button>
            <button @click=${() => setMonadState({ myState: true })}>setMonadState</button>
          `
        }}>
        </r-render>
      </r-part>
    `;
  }
})
export class RHtmlViewComponent extends LitElement {}