Libraries

Anatomy

Every piece of Libraries as it nests in code. A root holds the data and state; its parts and hooks only work inside it.

Installation

1. 1
   npm install <tarball or @pandaidx/widgets>

   Terminal

   npm install https://github.com/pandaidx/panda-widgets/releases/download/v1.14.1/pandaidx-widgets-1.14.1.tgz

2. 2
   import "@pandaidx/widgets/styles.css" in app/layout.tsx
3. 3
   Wrap the site in <PandaProvider publicKey apiUrl preset theme> (app/layout.tsx)
4. 4
   In each page (Server Component) call the widget's server loader, then render the widget with its data
5. 5
   Allow the images: next.config images.remotePatterns [{ protocol: "https", hostname: "**" }] (listing and blog photos come from several CDNs)

Usage

// app/page.tsx: the homepage buildings library as a carousel
import { PandaLibrary } from "@pandaidx/widgets/client"
import { fetchLibraries, fetchLibrary } from "@pandaidx/widgets/server"

const config = { publicKey: process.env.NEXT_PUBLIC_PANDA_PUBLIC_KEY!, apiUrl: process.env.NEXT_PUBLIC_PANDA_API_URL }

export default async function Home() {
  const { libraries } = await fetchLibraries(config)
  const buildings = libraries.find((library) => library.type === "buildings")
  const data = buildings ? await fetchLibrary({ ...config, libraryId: buildings.id, limit: 12 }) : null
  // Bind only routes actually rendering these widgets; each section may choose another instance.
  return <PandaLibrary data={data} layout="carousel" columns={3} linkRoutes={{ propertySearch: "/properties", buildingDetail: "/condos/{slug}" }} />
}

API reference

Server data

Loaders run in a Server Component and come from @pandaidx/widgets/server. Typed data is for a page you design yourself, rendered inside the root.