React

Currently, the recommended pattern to set up a React app with Jazz is to create a separate file (for example, called jazz.tsx) in which:

  1. You create a new Jazz React app context, extracting and exporting Jazz hooks.

    import { createJazzReactApp } from "jazz-react"; const Jazz = createJazzReactApp(); export const { useAccount, useCoState } = Jazz;
    • You extract hooks here so they can be aware of a custom AccountSchema for your app once you start using one (see Accounts & Migrations).

      This way, accounts returned by the hooks will be correctly typed throughout your app. Simply import them from jazz.tsx wherever you need them.

      import { createJazzReactApp } from "jazz-react"; const Jazz = createJazzReactApp({ AccountSchema: MyAppAccount }); export const { useAccount, useCoState } = Jazz;
  2. You define a context providing component (typically called JazzAndAuth) that uses

    • the context provider of the Jazz React app context you just created

    • the hooks and default/custom UI of one of the Auth Methods.

    This is also where you specify the sync & storage server to connect to (see Sync and storage).

    import { createJazzReactApp } from "jazz-react"; const Jazz = createJazzReactApp(); export const { useAccount, useCoState } = Jazz; import { PasskeyAuthBasicUI, usePasskeyAuth } from "jazz-react"; function JazzAndAuth({ children }: { children: React.ReactNode }) { const [passkeyAuth, passKeyState] = usePasskeyAuth({ appName }); return ( <> <Jazz.Provider auth={passkeyAuth} peer="wss://mesh.jazz.tools/?key=you@example.com" > {children} </Jazz.Provider> <PasskeyAuthBasicUI state={passKeyState} /> </> ); }

With JazzAndAuth defined, you can wrap your app in it and then use the extracted and exported hooks within your App.

ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <JazzAndAuth> <App /> </JazzAndAuth> </React.StrictMode> );