A search-enabled menu for Unsplash images.
Notion UInpm install pnpm add @notion-kit/unsplash| Prop | Type | Default | Description |
|---|---|---|---|
apiKey* | string | - | The Unsplash access key from Unsplash Developers. |
onSelect | (url: string) => void | - | Handler that is called when an Unsplash image is selected. |
import { Unsplash } from "@notion-kit/unsplash";
const UNSPLASH_ACCESS_KEY = "UNSPLASH_ACCESS_KEY";
export default function Default() {
return <Unsplash className="w-[540px]" apiKey={UNSPLASH_ACCESS_KEY} />;
}
"use client";
import { useState } from "react";
import { Unsplash } from "@notion-kit/unsplash";
const UNSPLASH_ACCESS_KEY = "UNSPLASH_ACCESS_KEY";
export default function Search() {
const [url, setUrl] = useState("");
return (
<div className="flex w-[540px] flex-col items-center gap-2">
<div className="flex w-full truncate px-4 text-xl font-medium">
Selected: {url}
</div>
<Unsplash apiKey={UNSPLASH_ACCESS_KEY} onSelect={setUrl} />
</div>
);
}