Controllers: ReactiveVariableController

ReactiveVariableController is a convenience wrapper around apollo reactive variables.

Apollo Elements controllers are not limited to Lit. Use them with any object that implements the ReactiveControllerHost interface. See ControllerHostMixin for an example.

import { customElement } from 'lit/decorators.js';
import { html, LitElement } from 'lit';

import { ReactiveVariableController } from '@apollo-elements/core';

import { locationVar } from './router.js';

import style from './profile-page.css.js';

@customElement('profile-page')
class ProfilePage extends LitElement {
  static styles = style;

  router = new ReactiveVariableController(this, locationVar);

  render() {
    const { username } = this.router.value?.groups ?? {}
    return html`
      <section ?hidden=${!username}>
        <h2>User ${username}</h2>
      </section>
    `;
  }
}

Fired when a reactive variable's value changes

Wraps a reactive variable in a reactive controller for easy integration.

Examples

Router

const locationVar = makeVar({ ...window.location })
installRouter(loc => locationVar({ ...loc }))

class RouterOutlet extends LitElement {
  router = new ReactiveVariableController(this, locationVar)

  render() {
    return html`
      <p>Current Path: ${this.router.value.pathname}</p>
    `;
  }
}

Properties

value

The latest value of the reactive variable

Methods

public

set

Convenient wrapper around reactiveVariable(newVal)

Parameters

x

Private API

Private Properties

private

#onNextChange

Private Methods

private

hostUpdate

Returns

unknown

Exports

import {
  VariableChangeEvent,
  ReactiveVariableController
} from '@apollo-elements/core/reactive-variable-controller';