Browse recipes

Share one reactive value

Render one shared counter after a reactive write.

Table of contents

APIs used

mount
Starts a Valyrian.js application on a DOM target.
createPulse
Creates one reactive value and returns `read()`, `write(...)` and `runSubscribers()`.

Run this recipe

Starting project
Use the local TSX and ESM project from Stage 1 with Valyrian.js installed and its ESM browser build configured.
File
Replace src/client-entry.tsx with this recipe snippet.
Run
Run npm run build, serve public with npx --yes serve@14.2.5 public --listen 8000, open http://localhost:8000 and use the example's visible controls.
Observable result
The mounted view displays Count: 1.

Starting point

Start one shared counter at 0.

Steps

Increment the current value through the setter and render the value returned by the reader.

ts
import { mount } from "valyrian.js";
import { createPulse } from "valyrian.js/pulses";

const [count, setCount] = createPulse(0);

setCount((current) => current + 1);

mount("body", () => `Count: ${count()}`);

Result

The mounted view displays Count: 1.

Continue