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