Accepting Other Sections as Parameters in Your Section
In deco, you can create powerful and flexible Sections by accepting other sections as parameters. This allows you to build modular and composable components that can be easily customized and reused in different contexts.Overview
When creating a Section that accepts other sections as parameters, you define an interface for the props of your Section component. This interface includes a property which is of typeSection
. The Section
type is a generic type that
represents any other section in deco.
Implementation
To create a Section that accepts other Sections as parameters, follow these steps:-
Import the
Section
type fromdeco/blocks/section.ts
. -
Define an interface for the props of your section component. Include a
property called
myProp
, which is of typeSection
.
- Inside your section component, access the
Component
andprops
properties from themyProp
prop. TheComponent
property represents the component function of the section passed as a parameter, and theprops
property contains the props of that section.
Example
Letβs say you have a section calledProductCardSection
that renders a product
card based on certain props:
ProductContainerSection
,
which accepts a ProductCardSection
as a parameter and wraps it in a container:
ProductContainerSection
to wrap any other
section, including the ProductCardSection
, and add a container around it.
Now, letβs say you want restrict your section to ProductCard
because you have
a lot of sections in your site but only that one should fit in that place, you
can do the following:
ProductCard
: