gusty yoke
Hi
We have a Stack component in our design system that can take some parameters like gap, justifyContent etc.
In [email protected] we can use our Stack component to render the slot.
But how can I "Slot settings" that gets passed down to the Stack component?
For example I would like to define the possible values for justifyContent to be a select in the fields section when the stack component is selected
gusty yoke
Never mind, I figured it out
render: ({ content: Content, justifyContent, gap }) => {
const AsWithProps = (props) => (
<HorizontalStack {...props} justifyContent={justifyContent} gap={gap} />
);
return <Content as={AsWithProps} />;
},
wild rover
Hey @gusty yoke! Yes, that's one way of doing it. You can also pass them down as classNames or inline styles, which can be more direct.
One recommendation I’ll give you is to pull your AsWithProps component definition outside of the render function. Otherwise, you're going to unmount and remount the component on every prop change, which is bad for performance, internal state, and is generally considered an anti-pattern. If you can't do that (because you need the closure around the props), then I'd at least memoize it using useMemo, or try to pass these styles as inline styles if possible.