Reactive shared state management for LitElement
npm install lit-shared-state
A reactive shared state management solution for LitElement instances
> Note: requires lit@^2 + typescript for decorators
lit of course)``bash`
npm install lit-shared-state
Please head over to our small documentation with live samples
`ts
import { LitElement, html } from "lit";
// this is all you need
import { state, use } from "lit-shared-state";
@state()
class State {
// one line to declare anything as state
// any subsequent change will redraw
// all components that depend on it
reactiveState: number = 1;
// ..
}
const globalState = new State();
class CompA extends LitElement {
// one line to pull in a slice of state
@use() state = globalState;
render() {
return html;
}
}
class CompB extends LitElement {
// use state in multiple components
@use() state = globalState;
render() {
return html
;
}
}// manipulating state from anywhere will
// lead to update for all LitElements that depend on it
globalState.reactiveState += 41;
``