Skip to main content

Catalog

The Catalog allows learners to search and browse for content.

✨ View Component in Storybook

Installation​

npm install @thoughtindustries/catalog

Props​

CatalogProvider​

NameRequiredTypeDescription
configYesCatalogProviderConfigConfig object controlling various aspects of the Catalog

Catalog​

NameRequiredTypeDescription
onAddedToQueueYesfunctionHandles "Add to Queue" button clicks
priceFormatNofunctionCustom price display formatting

Examples​

With Search Params and Custom Pagination​

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

const config = {
parsedUrl: {
pathname: '/catalog',
searchString: '?query=test'
}
}

<CatalogProvider config={config}>
<Catalog
onAddedToQueue={(item) => Promise.resolve()}
pagination={({page, pageSize, total, getPageLink}) => <>...</>} />
</CatalogProvider>