@nostr-dev-kit/ndk-react

NDK-React is a React library that makes it easy to build Nostr-related applications using React (and NextJS). It provides a set of components that wrap the NDK library and make it easy to use in React.

Get Started

Install

Execute this command to create a new Next.js application:

npx create-next-app@latest --typescript .

To get started with NDK-React, install the packages:

npm install @nostr-dev-kit/ndk
npm install @nostr-dev-kit/ndk-react

NDK Provider

NDKProvider is a React Context Provider that wraps your app and provides the NDK instance to all child components.

In your _app.tsx file, wrap your app with NDKProvider:

import type { AppProps } from "next/app";
import { NDKProvider } from "@nostr-dev-kit/ndk-react";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <NDKProvider
      relayUrls={[
        "wss://relay.damus.io",
        "wss://relay.snort.social",
        "wss://purplepag.es",
      ]}
    >
      <Component {...pageProps} />
    </NDKProvider>
  );
}

useNDK()

Once you've wrapped your app with NDKProvider, you can use the useNDK hook to access the NDK instance and other useful functions.

import { useNDK } from "@nostr-dev-kit/ndk-react";

const {
  ndk,
  signer,
  fetchEvents,
  fetchEventsEOSE,
  loginWithNip07,
  loginWithNip46,
  loginWithSecret,
  signPublishEvent,
} = useNDK();

Signers

Login with Extension

Login with Extension allows you to use your browser extension to login to your account. This function will return a user object that contains the user's information. Read about NIP-07 to learn more.

import { useNDK } from "@nostr-dev-kit/ndk-react";

const { loginWithNip07 } = useNDK();

const user = await loginWithNip07();

Demo

Login with Nostr Connect

Login with Nostr Connect allows you to connect and sign events remotely without the client holding the private key of your nostr account. Read about NIP-46 to learn more.

import { useNDK } from "@nostr-dev-kit/ndk-react";

const { loginWithNip46 } = useNDK();

const user = await loginWithNip46(npubOrToken);

To reconnect to user's account, you have to save user's npub and sk, and then use them to login again.

const user = await loginWithNip46(npubOrToken, sk);

Demo

Login with Secret

Login with Secret is a function that allows you to login with a secret key or nsec. This function will return a user object that contains the user's information.

import { useNDK } from "@nostr-dev-kit/ndk-react";

const { loginWithSecret } = useNDK();

const user = await loginWithSecret(nsecOrSecretKey);

Demo

Events

Get Events

This example shows how to fetch events from relay. You define the filter to get events and then call the fetchEvents function. The result is an array of NDKEvent events.

import { useNDK } from "@nostr-dev-kit/ndk-react";
import { NDKFilter } from "@nostr-dev-kit/ndk";

const { fetchEvents } = useNDK();

const filter: NDKFilter = {
  kinds: [1],
  "#t": ["ndk"],
};

const events = await fetchEvents(filter);

Sign and Publish Events

This example shows how to sign and publish events to the relay.

import { NDKEvent } from "@nostr-dev-kit/ndk";
import { useNDK } from "@nostr-dev-kit/ndk-react";

const { signPublishEvent } = useNDK();

const note = new NDKEvent();
note.kind = 1;
note.content = "Hello World from #NDK!";
note.tags = [["t", "ndk"]];

const event = await signPublishEvent(note);

Demo

You must be signed in to sign and publish events.

Users

Get User Profile

getProfile() returns the NDKUserProfile of a given npub or hexpubkey. Using this ensures that the profile is queried once and stored in useRef().

For example, to get the display name of the user:

const { getProfile } = useNDK();

<p>
  User's display name is:
  {
    getProfile(
      "npub1alpha9l6f7kk08jxfdaxrpqqnd7vwcz6e6cvtattgexjhxr2vrcqk86dsn"
    ).displayName
  }
</p>

User's display name is:

For example, to get the avatar of the user:

const { getProfile } = useNDK();

<img
  src={
    getProfile(
      "npub1alpha9l6f7kk08jxfdaxrpqqnd7vwcz6e6cvtattgexjhxr2vrcqk86dsn"
    ).image
  }
/>

Other attributes of NDKUserProfile you can get from getProfile():

export interface NDKUserProfile {
  name?: string;
  displayName?: string;
  image?: string;
  banner?: string;
  bio?: string;
  nip05?: string;
  lud06?: string;
  lud16?: string;
  about?: string;
  zapService?: string;
}