Skip to main content
Home
Browse packagesDocsSign in

@j5/zustand-relay-client@0.1.5

latest

WIP

This package works with Node.js, Deno, BrowsersIt is unknown whether this package works with Cloudflare Workers, Bun
It is unknown whether this package works with Cloudflare Workers
This package works with Node.js
This package works with Deno
It is unknown whether this package works with Bun
This package works with Browsers
JSR Score
94%
Published
a year ago (0.1.5)

Zustand Relay Client

import {relay} from "@j5/zustand-relay-client";
import {useEffect} from "react";

/** The client's view of the server state */
export type RemoteState = Partial<{
  count: number;
  messages: string[];
}>;

type RemoteActions = {
  increment: () => void;
}

const {
  client, // can be used to directly talk to the remote server
  store, // can be used to access local zustand store outside of useRemoteState
  subscribe,
  useRemoteState,
  remoteApi,
} = relay<RemoteState, RemoteActions>({
  defaultState: {},
  wsUrl: `ws://localhost:8080/join`,
});

export default function App() {
  // somewhere in your app, you need to call subscribe 
  useEffect(() => {
    return subscribe();
  }, []);

  return <>
    <Counter/>
  </>;
}

function Counter() {
  // this will re-render whenever the server count changes
  const count = useRemoteState(s => s.count);

  return <div className='flex gap-2'>
    Count: {count}
    <button onClick={() => {
      remoteApi.increment();
      // note: the above is equivalent to:
      // remoteStateClient.sendMessage({ type: "increment" });
    }}>
      Increment
    </button>
  </div>;
}

New Ticket: Report package

Please provide a reason for reporting this package. We will review your report and take appropriate action.

Please review the JSR usage policy before submitting a report.

Add Package

deno add jsr:@j5/zustand-relay-client

Import symbol

import * as zustand_relay_client from "@j5/zustand-relay-client";
or

Import directly with a jsr specifier

import * as zustand_relay_client from "jsr:@j5/zustand-relay-client";

Add Package

pnpm i jsr:@j5/zustand-relay-client
or (using pnpm 10.8 or older)
pnpm dlx jsr add @j5/zustand-relay-client

Import symbol

import * as zustand_relay_client from "@j5/zustand-relay-client";

Add Package

yarn add jsr:@j5/zustand-relay-client
or (using Yarn 4.8 or older)
yarn dlx jsr add @j5/zustand-relay-client

Import symbol

import * as zustand_relay_client from "@j5/zustand-relay-client";

Add Package

vlt install jsr:@j5/zustand-relay-client

Import symbol

import * as zustand_relay_client from "@j5/zustand-relay-client";

Add Package

npx jsr add @j5/zustand-relay-client

Import symbol

import * as zustand_relay_client from "@j5/zustand-relay-client";

Add Package

bunx jsr add @j5/zustand-relay-client

Import symbol

import * as zustand_relay_client from "@j5/zustand-relay-client";