Use Product Cache

const { cache, products, onLoadNewProduct } = useProductCache();

Overview

The useProductCache hook can be used to build out a multi-product experience, where the user can add/edit/remove products to a cache allowing them to configure multiple products in a single session.

The hook returns an object with 3 properties, cache, products and onLoadNewProduct:

Cache

The cache property is an array of products that the user has begun to configure. Each element of this array is an object (representing a project), which includes: a name, label, thumbnail, selected state, as well as a handleSelect and handleRemove method to select or remove the product from the cache respectively.

const { cache } = useProductCache();
const { name, label, thumbnail, selected, handleSelect, handleRemove } =
  cache[0];

Products

The products property is an array of products available to the Treble app as implemented through the multi-product workflow. Each element of this array is an object (representing a project), which includes: a name, label and a handleSelect method to select the product for active configuration.

const { products } = useProductCache();
const { name, label, handleSelect } = products[0];

Code Examples

import { useProductCache } from '@threekit-tools/treble';

const ProductCacheComponent = () => {
  const { cache, products, onLoadNewProduct } = useProductCache();
  return <div>Product Cache Component example</div>;
};