React Hooks

useObservableMemo

The useObservableMemo hook is a thing wrapper around the useObservableState hook from observable-hooks that re-creates the observable when the dependencies change and allows undefined to returned

This is useful for subscribing to observables that are not created yet

const account = useActiveAccount(); // IAccount | null

const profile = useObservableMemo(() => {
  if (account) return eventStore.profile(account.pubkey);
  else return undefined;
}, [account.pubkey]);

useEventStore

The useEventStore hook can be used at access the EventStore from anywhere in the react tree

useModel

The useModel hook requires the EventStoreProvider and can be used to create and run a model in the EventStore and subscribe to the results

function UserAvatar({ pubkey }: { pubkey: string }) {
  const profile = useModel(ProfileQuery, [pubkey]);
	// profile will be undefined until the event is loaded

	return <img src={profile?.picture}/>
}

useEventFactory

The useEventFactory hook can be used at access the EventFactory from anywhere in the react tree

useActiveAccount

The useActiveAccount hook requires the AccountsProvider and returns the currently active account or undefined

useAccountManager

The useAccountManager hook requires the AccountsProvider and returns the AccountManager class

useRenderedContent

The useRenderedContent hook can be used to parse and render an events content into a JSX tree

INFO

The components directory should be defined outside of the component itself to avoid unnecessary re-renders

const event = { content: "hello world #grownostr", tags: [["t", "grownostr"]] };

// a directory of optional components to use when rendering the content
const components = {
  // render hashtags inline
  hashtag: ({ node }) => <a href={`/hashtag/${node.hashtag}`}>{node.name}</a>,
  // custom NIP-30 emojis
  emoji: ({ node }) => <img src={node.url} style={{ width: "1.1em" }} />,
};

// A simple component to render an event
function SimpleNote({ event }) {
  const content = useRenderedContent(event, components);

  return (
    <div>
      <div>
        {event.pubkey} {event.created_at}
      </div>
      {content}
    </div>
  );
}

// render the event
<SimpleNote event={event} />;