Skip to main content

useReusableBlocks

This hook provides access to the reusable blocks store, a persisted Zustand store that manages reusable block templates. Reusable blocks are block configurations that can be shared across multiple pages.

Import

import { useReusableBlocks } from '@appmaker-xyz/core';

Basic Usage

// Read reusable blocks
const reusableBlocks = useReusableBlocks((state) => state.reusableBlocks);

// Get a specific reusable block
const headerBlock = reusableBlocks['header-block'];

// Add a reusable block
const addReusableBlock = useReusableBlocks((state) => state.addReusableBlock);
addReusableBlock('my-block', blockConfig);

// Set all reusable blocks
const setReusableBlocks = useReusableBlocks((state) => state.setReusableBlocks);
setReusableBlocks(allBlocks);

Parameters

ParameterTypeDescription
selectorFunctionA selector function that receives the store state and returns the slice you need.

Available State

PropertyTypeDescription
reusableBlocksObjectMap of reusable block names to their block configurations.
initialLoadingbooleanWhether the persisted store is still loading from storage.

Available Actions

ActionTypeDescription
setReusableBlocksFunctionReplaces all reusable blocks. Signature: setReusableBlocks(blocksMap).
addReusableBlockFunctionAdds or overwrites a reusable block. Signature: addReusableBlock(name, block).
addDefaultReusableBlockFunctionAdds a block only if it doesn't already exist. Signature: addDefaultReusableBlock(name, block).