t4t5/nostr-react

nostr-react

React Hooks for Nostr ✨

Installation

npm install nostr-react

Example usage:

Wrap your app in the NostrProvider:

import { NostrProvider } from "nostr-react";

const relayUrls = [
  "wss://nostr-pub.wellorder.net",
  "wss://relay.nostr.ch",
];

function MyApp() {
  return (
    <NostrProvider relayUrls={relayUrls} debug={true}>
      <App />
    </NostrProvider>
  );
};

You can now use the useNostr and useNostrEvents hooks in your components!

Fetching all text_note events starting now:

import { useRef } from "react";
import { useNostrEvents, dateToUnix } from "nostr-react";

const GlobalFeed = () => {
  const now = useRef(new Date()); // Make sure current time isn't re-rendered

  const { events } = useNostrEvents({
    filter: {
      since: dateToUnix(now.current), // all new events from now
      kinds: [1],
    },
  });

  return (
    <>
      {events.map((event) => (
        <p key={event.id}>{event.pubkey} posted: {event.content}</p>
      ))}
    </>
  );
};

Fetching all text_note events from a specific user, since the beginning of time:

import { useNostrEvents } from "nostr-react";

const ProfileFeed = () => {
  const { events } = useNostrEvents({
    filter: {
      authors: [
        "9c2a6495b4e3de93f3e1cc254abe4078e17c64e5771abc676a5e205b62b1286c",
      ],
      since: 0,
      kinds: [1],
    },
  });

  return (
    <>
      {events.map((event) => (
        <p key={event.id}>{event.pubkey} posted: {event.content}</p>
      ))}
    </>
  );
};

Fetching user profiles

Use the useProfile hook to render user profiles. You can use this in multiple components at once (for example, rendering a name and avatar for each message in a chat), the hook will automatically use batching to prevent errors where a client sends too many requests at once. 🎉

import { useProfile } from "nostr-react";

const Profile = () => {
  const { data: userData } = useProfile({
    pubkey,
  });

  return (
    <>
      <p>Name: {userData?.name}</p>
      <p>Public key: {userData?.npub}</p>
      <p>Picture URL: {userData?.picture}</p>
    </>
  )
}

Post a message:

import { useNostr, dateToUnix } from "nostr-react";

import {
  type Event as NostrEvent,
  getEventHash,
  getPublicKey,
  signEvent,
} from "nostr-tools";

export default function PostButton() {
  const { publish } = useNostr();

  const onPost = async () => {
    const privKey = prompt("Paste your private key:");

    if (!privKey) {
      alert("no private key provided");
      return;
    }

    const message = prompt("Enter the message you want to send:");

    if (!message) {
      alert("no message provided");
      return;
    }

    const event: NostrEvent = {
      content: message,
      kind: 1,
      tags: [],
      created_at: dateToUnix(),
      pubkey: getPublicKey(privKey),
    };

    event.id = getEventHash(event);
    event.sig = signEvent(event, privKey);

    publish(event);
  };

  return (
    <Button onClick={onPost}>Post a message!</Button>
  );
}