@thoughtindustries/catalog v1.2.6

@thoughtindustries/catalog

The Catalog allows learners to search and browse for content. It is a central component to any online learning platform.

Table of contents:

• Catalog
• Core catalog components
  • CatalogLinkButton
  • CatalogProvider
  • HeightEqualizer
• Core catalog hooks
  • useCatalog

Catalog

The Catalog component takes a callback function to handle catalog item's add-to-queue event, and optional properties to customize the catalog like price formatting, currency formating, etc. It must be a descendent of the CatalogProvider component.

Example code

import { CatalogProvider, Catalog } from '@thoughtindustries/catalog';

export function MyComponent() {
  // ...
  const addToQueueHandler = (item) => Promise.resolve();

  return (
    <CatalogProvider ssr pathName="/catalog">
      <Catalog onAddedToQueue={addToQueueHandler} />
    </CatalogProvider>
  );
}

Props

Core catalog components

Core catalog components are objects that contain all of business logic for the catalog concept that they represent. They're used to parse and process data.

CatalogLinkButton

The CatalogLinkButton component renders a link button that conditionally overrides the link behavior to handle client side navigation. It must be a descendent of a CatalogProvider component. This is used internally by Catalog component to handle both server and client side rendering. If you are composing own version of Catalog component for different layout and styles, this component can be useful.

Example code

import { CatalogProvider, CatalogLinkButton } from '@thoughtindustries/catalog';

function CustomCatalog() {
  // ...

  return (
    <>
      {/* // ... */}
      <CatalogLinkButton href="/catalog?page=2" />
    </>
  );
}

export function MyComponent() {
  // ...

  return (
    <CatalogProvider ssr={false} pathName="/catalog">
      <CustomCatalog />
    </CatalogProvider>
  );
}

Props

This component is inherently an HTMLAnchorElement element with only the onClick prop omitted. The component will use own onClick handler.

Related components

• CatalogProvider

Related hooks

• useCatalog

CatalogProvider

The CatalogProvider component creates a context for using a catalog. It requires an url path name and a ssr flag to handle the data fetching as well as user interactions with catalog filters. It creates relevant context values that can be accessed by any descendent component using the useCatalog hook.

You must use this component if you want to use the useCatalog hook, or if you would like to use the CatalogLinkButton component.

Example code

import { CatalogProvider } from '@thoughtindustries/catalog';

export function App() {
  return <CatalogProvider ssr pathName="/catalog">{/* Your JSX */}</CatalogProvider>;
}

Props

Related hooks

• useCatalog

HeightEqualizer

The HeightEqualizer component is a wrapper component that calculate the maximum height from its children HeightEqualizerElement components. With the max height value, it updates all children HeightEqualizerElement components to the same value. This is used internally by Catalog component to handle catalog item height in grid view. If you are composing own version of Catalog component for different layout and styles, this component can be useful.

Example code

import { HeightEqualizer, HeightEqualizerElement } from '@thoughtindustries/catalog';

export function MyComponent() {
  // ...

  return (
    <HeightEqualizer>
      <>
        <HeightEqualizerElement key="item-1">{/* Your JSX */}</HeightEqualizerElement>
        <HeightEqualizerElement key="item-2">{/* Your JSX */}</HeightEqualizerElement>
      </>
    </HeightEqualizer>
  );
}

Props

Props for HeightEqualizer

Props for HeightEqualizerElement

Core catalog hooks

Core catalog hooks are functions that allow you to use state and other methods inside catalog components.

useCatalog

The useCatalog hook provides access to the catalog context. It must be a descendent of a CatalogProvider component.

Example code

import { CatalogProvider, useCatalog } from '@thoughtindustries/catalog';

export function MyComponent() {
  return (
    <CatalogProvider ssr={false} pathName="/catalog">
      <CatalogLoader />
    </CatalogProvider>
  );
}

export function CatalogLoader() {
  const { isLoading } = useCatalog();

  if (isLoading) {
    return <>Loading data</>;
  }

  return ({/* Your JSX */});
}

Return value

The useCatalog hook returns an object with the following keys:

Related components

• CatalogProvider