Providers

QueryStoreProvider

The QueryStoreProvider can be used to provide a QueryStore and EventStore to the app

const eventStore = new EventStore();
const queryStore = new QueryStore(eventStore);

const root = (
  <QueryStoreProvider store={queryStore}>
    <App />
  </QueryStoreProvider>
);

Once your app is wrapped in the provider you can access the query store anywhere using the useQueryStore hook

function UserName({ pubkey }: { pubkey: string }) {
  const store = useQueryStore();

  const [profile, setProfile] = useState();

  useEffect(() => {
    const sub = store.profile(pubkey).subscribe(setProfile);

    return () => sub.unsubscribe();
  }, [pubkey, store]);

  return <span>{profile?.display_name}</span>;
}

FactoryProvider

The FactoryProvider can be used to provide an EventFactory to components

AccountsProvider

The AccountsProvider can be used to provide an AccountManager to components and allows them to use the useActiveAccount and useAccountManager hooks