From 98bccbdb69165834fd90710289ed6bd7cf47ee3c Mon Sep 17 00:00:00 2001 From: Michael Potter Date: Tue, 2 Jul 2024 17:02:11 -0400 Subject: [PATCH] Update README.md --- README.md | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 50 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index a0d0ca1..38640df 100644 --- a/README.md +++ b/README.md @@ -51,9 +51,6 @@ for await (const value of count) { } ``` - -## Lit - The cool thing about using AsyncIterators is that frameworks can expose methods for re-rendering components when new values are yielded. @@ -75,6 +72,56 @@ export class MyElement extends LitElement { } ``` +## Adapters + +This library exposes framework specific adapters to make it easy to +sync changes of the Signals to trigger the component render lifecycle. + +### React + +```tsx +import { Signal } from '@heymp/signals'; +import { useSignal } from '@heymp/signals/react'; + +const counter = new Signal.State(0); + +function App() { + const [count] = useSignal(counter); + + return ( + <> + + + ); +} +``` + +### Lit + +```ts +import { LitElement, html } from 'lit' +import { State } from '@heymp/signals'; +import { watchSignal } from '@heymp/signals/lit'; + +export class MyCounter extends LitElement { + @watchSignal + private count?: State; + + @watchSignal + private message = new State('hello, world'); + + render() { + return html` + ${this.message.value} ${this.count?.value} + ` + } +} + +} +``` + ## Signals Standard There has been some awesome work done by Rob Eisenberg and library authors