https://github.com/t4t5/nostr-react
React Hooks for Nostr 🦤
https://github.com/t4t5/nostr-react
hooks nostr react
Last synced: 4 months ago
JSON representation
React Hooks for Nostr 🦤
- Host: GitHub
- URL: https://github.com/t4t5/nostr-react
- Owner: t4t5
- License: mit
- Created: 2022-12-20T05:37:47.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-20T22:13:24.000Z (almost 2 years ago)
- Last Synced: 2024-05-02T06:07:33.303Z (over 1 year ago)
- Topics: hooks, nostr, react
- Language: TypeScript
- Homepage:
- Size: 430 KB
- Stars: 82
- Watchers: 4
- Forks: 14
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Self-Hosting-Guide - nostr-react - React Hooks for Nostr. (Install from Source / Nostr)
- awesome-nostr - nostr-react - react.svg?style=social) - React Hooks for Nostr (Libraries / Client reviews and/or comparisons)
README
nostr-react
React Hooks for Nostr ✨
## Installation
```
npm install nostr-react
```
## Example usage:
Wrap your app in the NostrProvider:
```tsx
import { NostrProvider } from "nostr-react";
const relayUrls = [
"wss://nostr-pub.wellorder.net",
"wss://relay.nostr.ch",
];
function MyApp() {
return (
);
};
```
You can now use the `useNostr` and `useNostrEvents` hooks in your components!
**Fetching all `text_note` events starting now:**
```tsx
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) => (
{event.pubkey} posted: {event.content}
))}
>
);
};
```
**Fetching all `text_note` events from a specific user, since the beginning of time:**
```tsx
import { useNostrEvents } from "nostr-react";
const ProfileFeed = () => {
const { events } = useNostrEvents({
filter: {
authors: [
"9c2a6495b4e3de93f3e1cc254abe4078e17c64e5771abc676a5e205b62b1286c",
],
since: 0,
kinds: [1],
},
});
return (
<>
{events.map((event) => (
{event.pubkey} posted: {event.content}
))}
>
);
};
```
**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. 🎉
```tsx
import { useProfile } from "nostr-react";
const Profile = () => {
const { data: userData } = useProfile({
pubkey,
});
return (
<>
Name: {userData?.name}
Public key: {userData?.npub}
Picture URL: {userData?.picture}
>
)
}
```
**Post a message:**
```tsx
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 (
Post a message!
);
}
```