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>
);
}