Skip to main content

​
Bookmark

The primary component for rendering a bookmark card with its metadata, cover image, tags, and action menu.

​
Props

​
bookmark
Bookmark
required
The bookmark object to display

​
Usage

import Bookmark from './components/Bookmark'

const bookmark = {
  id: 1,
  title: "React Documentation",
  domain: "react.dev",
  url: "https://react.dev",
  description: "The library for web and native user interfaces",
  image: "https://react.dev/og-image.png",
  created_at: "2024-03-15T10:30:00Z",
  saved_by: "user-123",
  tags: ["react", "javascript", "frontend"],
  pinned: false
}

<Bookmark bookmark={bookmark} />

​
Features

  • Lazy Loading: Uses intersection observer to load images only when visible
  • Fallback Images: Automatically handles missing cover and icon images
  • Pin Badge: Displays a pin icon for pinned bookmarks
  • Spotlight Effect: Interactive card spotlight effect on hover

​
BookmarkList

Container component that fetches, filters, sorts, and displays a grid of bookmarks.

​
Props

This component has no props. It reads state from the BookmarkStore and AuthStore.

​
Usage

import BookmarkList from './components/BookmarkList'

<BookmarkList />

​
Features

  • Auto-fetch: Automatically loads bookmarks on mount
  • Tag Filtering: Filters bookmarks by selected tag
  • Time Period Filtering: Filter by “all”, “month”, or “week”
  • Smart Sorting: Pinned bookmarks always appear first, then sorted by date
  • Responsive Grid: 1 column on mobile, 2 on tablet, 3 on desktop
  • Empty State: Shows empty state when no bookmarks exist

​
Store Dependencies

The component relies on the following store state:
  • bookmarks: Array of bookmark objects
  • loading: Loading state boolean
  • selectedTag: Currently selected tag filter
  • order: Sort order (“asc” or “desc”)
  • timePeriod: Time filter (“all”, “month”, “week”)

​
BookmarkOptions

Dropdown menu component providing actions for managing a bookmark.

​
Props

​
bookmark
Bookmark
required
The bookmark object to perform actions on. See Bookmark component for full type details.

​
Usage

import BookmarkOptions from './components/BookmarkOptions'

<BookmarkOptions bookmark={bookmark} />

​
Available Actions

Toggles the bookmark’s pinned status. Pinned bookmarks appear at the top of the list.
Fetches fresh metadata from the URL, updating title, description, and cover image
Opens a modal to manually edit bookmark title, description, and image
Uses AI to automatically generate relevant tags based on the bookmark’s URL, title, and description
Opens a confirmation modal to delete the bookmark

​
Toast Notifications

The component provides user feedback through toast notifications:
  • Success messages when operations complete
  • Error messages when operations fail
  • Loading indicators for async operations
  • Info messages for clipboard and pin actions

Build docs developers (and LLMs) love

Get started for freeTalk to us