https://github.com/t4t5/nostr-react

React Hooks for Nostr 🦤
https://github.com/t4t5/nostr-react

hooks nostr react

Last synced: 9 days 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 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-20T22:13:24.000Z (10 months ago)
• Last Synced: 2024-05-02T06:07:33.303Z (8 months 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

• 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!

  );

}

```