@snort/system-react

React hooks for @snort/system

Available hooks

useRequestBuilder(RequestBuilder)

The main hook which allows you to subscribe to nostr relays and returns a reactive store.

useUserProfile(pubkey: string | undefined)

Profile hook, profile loading is automated, this hook will return the profile from cache and also refresh the cache in the background (stale-while-revalidate)

useEventFeed(NostrLink) / useEventsFeed(Array<NostrLink>)

A simple hook which can load events using the NostrLink class, this class contains one NIP-19 entity nevent/naddr etc.

useReactions(id, Array<NostrLink>)

Loads reactions for a set of events, this can be a set of posts on a profile or an arbitary list of events.

useEventReactions(NostrLink, Array<NostrEvent>)

Process a set of related events (usually results from useReactions) and return likes/dislikes/reposts/zaps

useUserSearch()

Search for profiles in the profile cache, this also returns exact links if they match

useSystemState(System)

Hook state of the nostr system

React/Preact

This package works with both React and Preact. Preact consumers alias react and react-dom to preact/compat in their bundler. The package imports from react — the bundler resolves it to the compat layer at build time.

Vite config for Preact

import { defineConfig } from "vite"
import preact from "@preact/preset-vite"
import { resolve } from "path"

export default defineConfig({
  plugins: [preact()],
  resolve: {
    alias: {
      react: resolve("node_modules/preact/compat"),
      "react-dom": resolve("node_modules/preact/compat"),
    },
  },
})

Webpack config for Preact

module.exports = {
  resolve: {
    alias: {
      react: "preact/compat",
      "react-dom": "preact/compat",
    },
  },
}

Preact example

import { h } from "preact"
import { useMemo } from "preact/compat"
import { NostrSystem, RequestBuilder, TaggedNostrEvent } from "@snort/system"
import { SnortContext, useUserProfile, useRequestBuilder } from "@snort/system-react"

const System = new NostrSystem({})
;["wss://relay.snort.social", "wss://nos.lol"].forEach(r =>
  System.ConnectToRelay(r, { read: true, write: false }),
)

export function Note({ ev }: { ev: TaggedNostrEvent }) {
  const profile = useUserProfile(ev.pubkey)

  return (
    <div>
      Post by: {profile.name ?? profile.display_name}
      <p>{ev.content}</p>
    </div>
  )
}

export function UserPosts(props: { pubkey: string }) {
  const sub = useMemo(() => {
    const rb = new RequestBuilder("get-posts")
    rb.withFilter().authors([props.pubkey]).kinds([1]).limit(10)
    return rb
  }, [props.pubkey])

  const data = useRequestBuilder(sub)
  return (
    <>
      {data.map(a => (
        <Note ev={a} />
      ))}
    </>
  )
}

export function MyApp() {
  return (
    <SnortContext.Provider value={System}>
      <UserPosts pubkey="63fe6318dc58583cfe16810f86dd09e18bfd76aabc24a0081ce2856f330504ed" />
    </SnortContext.Provider>
  )
}