{"id":13832723,"url":"https://github.com/t4t5/nostr-react","last_synced_at":"2025-08-01T04:32:04.470Z","repository":{"id":64981229,"uuid":"580259726","full_name":"t4t5/nostr-react","owner":"t4t5","description":"React Hooks for Nostr 🦤","archived":false,"fork":false,"pushed_at":"2024-02-20T22:13:24.000Z","size":440,"stargazers_count":82,"open_issues_count":18,"forks_count":14,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-05-02T06:07:33.303Z","etag":null,"topics":["hooks","nostr","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/t4t5.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-20T05:37:47.000Z","updated_at":"2024-05-29T23:55:20.235Z","dependencies_parsed_at":"2024-01-13T16:28:49.102Z","dependency_job_id":"983175da-80e4-4f8f-9e18-95af4e707682","html_url":"https://github.com/t4t5/nostr-react","commit_stats":{"total_commits":64,"total_committers":4,"mean_commits":16.0,"dds":0.046875,"last_synced_commit":"aa230629bd97d66d27789833c6c710412729a7e9"},"previous_names":["nostrgg/nostrgg-react"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4t5%2Fnostr-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4t5%2Fnostr-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4t5%2Fnostr-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4t5%2Fnostr-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/t4t5","download_url":"https://codeload.github.com/t4t5/nostr-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228330396,"owners_count":17903070,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks","nostr","react"],"created_at":"2024-08-04T11:00:28.846Z","updated_at":"2024-12-05T16:19:52.745Z","avatar_url":"https://github.com/t4t5.png","language":"TypeScript","funding_links":[],"categories":["Install from Source","Libraries","TypeScript"],"sub_categories":["Nostr","Client reviews and/or comparisons"],"readme":"\u003cp align=\"center\"\u003e\n\u003cb\u003enostr-react\u003c/b\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\nReact Hooks for Nostr ✨\n\u003c/p\u003e\n\n## Installation\n\n```\nnpm install nostr-react\n```\n\n## Example usage:\n\nWrap your app in the NostrProvider:\n\n```tsx\nimport { NostrProvider } from \"nostr-react\";\n\nconst relayUrls = [\n  \"wss://nostr-pub.wellorder.net\",\n  \"wss://relay.nostr.ch\",\n];\n\nfunction MyApp() {\n  return (\n    \u003cNostrProvider relayUrls={relayUrls} debug={true}\u003e\n      \u003cApp /\u003e\n    \u003c/NostrProvider\u003e\n  );\n};\n```\n\nYou can now use the `useNostr` and `useNostrEvents` hooks in your components!\n\n**Fetching all `text_note` events starting now:**\n\n```tsx\nimport { useRef } from \"react\";\nimport { useNostrEvents, dateToUnix } from \"nostr-react\";\n\nconst GlobalFeed = () =\u003e {\n  const now = useRef(new Date()); // Make sure current time isn't re-rendered\n\n  const { events } = useNostrEvents({\n    filter: {\n      since: dateToUnix(now.current), // all new events from now\n      kinds: [1],\n    },\n  });\n\n  return (\n    \u003c\u003e\n      {events.map((event) =\u003e (\n        \u003cp key={event.id}\u003e{event.pubkey} posted: {event.content}\u003c/p\u003e\n      ))}\n    \u003c/\u003e\n  );\n};\n```\n\n**Fetching all `text_note` events from a specific user, since the beginning of time:**\n\n```tsx\nimport { useNostrEvents } from \"nostr-react\";\n\nconst ProfileFeed = () =\u003e {\n  const { events } = useNostrEvents({\n    filter: {\n      authors: [\n        \"9c2a6495b4e3de93f3e1cc254abe4078e17c64e5771abc676a5e205b62b1286c\",\n      ],\n      since: 0,\n      kinds: [1],\n    },\n  });\n\n  return (\n    \u003c\u003e\n      {events.map((event) =\u003e (\n        \u003cp key={event.id}\u003e{event.pubkey} posted: {event.content}\u003c/p\u003e\n      ))}\n    \u003c/\u003e\n  );\n};\n```\n\n**Fetching user profiles**\n\nUse 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. 🎉\n\n```tsx\nimport { useProfile } from \"nostr-react\";\n\nconst Profile = () =\u003e {\n  const { data: userData } = useProfile({\n    pubkey,\n  });\n\n  return (\n    \u003c\u003e\n      \u003cp\u003eName: {userData?.name}\u003c/p\u003e\n      \u003cp\u003ePublic key: {userData?.npub}\u003c/p\u003e\n      \u003cp\u003ePicture URL: {userData?.picture}\u003c/p\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n**Post a message:**\n\n```tsx\nimport { useNostr, dateToUnix } from \"nostr-react\";\n\nimport {\n  type Event as NostrEvent,\n  getEventHash,\n  getPublicKey,\n  signEvent,\n} from \"nostr-tools\";\n\nexport default function PostButton() {\n  const { publish } = useNostr();\n\n  const onPost = async () =\u003e {\n    const privKey = prompt(\"Paste your private key:\");\n\n    if (!privKey) {\n      alert(\"no private key provided\");\n      return;\n    }\n\n    const message = prompt(\"Enter the message you want to send:\");\n\n    if (!message) {\n      alert(\"no message provided\");\n      return;\n    }\n\n    const event: NostrEvent = {\n      content: message,\n      kind: 1,\n      tags: [],\n      created_at: dateToUnix(),\n      pubkey: getPublicKey(privKey),\n    };\n\n    event.id = getEventHash(event);\n    event.sig = signEvent(event, privKey);\n\n    publish(event);\n  };\n\n  return (\n    \u003cButton onClick={onPost}\u003ePost a message!\u003c/Button\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft4t5%2Fnostr-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ft4t5%2Fnostr-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft4t5%2Fnostr-react/lists"}