Unsplash

No result found.

<Unsplash apiKey={UNSPLASH_ACCESS_KEY} onSelect={setImage} />

<Unsplash apiKey={UNSPLASH_ACCESS_KEY} onSelect={setImage} />

Installation

pnpm add @notion-kit/ui

pnpm add @notion-kit/ui

Examples

Basic

The picker opens inline, loads a default Unsplash collection, and searches remotely as the input changes.

No result found.

import { Unsplash } from "@notion-kit/ui/unsplash";

const UNSPLASH_ACCESS_KEY = "UNSPLASH_ACCESS_KEY";

export default function Default() {
  return <Unsplash apiKey={UNSPLASH_ACCESS_KEY} />;
}

import { Unsplash } from "@notion-kit/ui/unsplash";const UNSPLASH_ACCESS_KEY = "UNSPLASH_ACCESS_KEY";export default function Default() {  return <Unsplash apiKey={UNSPLASH_ACCESS_KEY} />;}

Controlled Selection

Use onSelect to receive the full Unsplash image object and decide which URL size to store.

Selected:

No result found.

"use client";

import { useState } from "react";

import { Unsplash } from "@notion-kit/ui/unsplash";

const UNSPLASH_ACCESS_KEY = "UNSPLASH_ACCESS_KEY";

export default function Search() {
  const [url, setUrl] = useState("");

  return (
    <div className="flex w-135 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={(image) => setUrl(image.urls.full)}
      />
    </div>
  );
}

"use client";import { useState } from "react";import { Unsplash } from "@notion-kit/ui/unsplash";const UNSPLASH_ACCESS_KEY = "UNSPLASH_ACCESS_KEY";export default function Search() {  const [url, setUrl] = useState("");  return (    <div className="flex w-135 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={(image) => setUrl(image.urls.full)}      />    </div>  );}

API Reference

Unsplash

Prop	Type	Default	Description
`apiKey`*	`string`	-	The Unsplash access key from Unsplash Developers.
`onSelect`	`(image: UnsplashImage) => void`	-	Handler called when an image is selected. Use `image.urls.small`, `regular`, `full`, or raw.

`type` UnsplashImage

type UnsplashImage = AssetBasic;

UnsplashImage is exported from @notion-kit/ui/unsplash and matches the unsplash-js basic asset shape.

Unsplash

Installation

Examples

Basic

Controlled Selection

API Reference

Unsplash

type UnsplashImage

On this page

`type` UnsplashImage