Conditional Wrapper
Wrap your elements conditionally with a higher order component
Source ↗️ Report Issue ↗️Keep your code clean and reduce code duplication with the help of the ConditionalWrapper
component which helps you conditionally wrap elements. For example, the following two images are rendered using the ConditionalWrapper
component.
In the first scenario, the condition
prop that handles whether to wrap the element or not, is set to false
, so only an img
tag is rendered. In the second scenario, however, the img
is wrapped into a figure
with a caption, as the condition
prop is set to true
:
The component expects the following props and setup depending on the framework:
- Astro: Define an element with a
slot
calledwrapper
inside the component. Inside thewrapper
slot, specify the place where child elements should be placed using thechildren
string. Anything outside thewrapper
slot will be rendered without the wrapper element if thecondition
prop isfalse
. - Svelte: Specify the
element
prop on theConditionalWrapper
to tell Svelte which HTML tag should be used for wrapping. Defaults todiv
. You can pass any other HTML attributes on theConditionalWrapper
component to pass along to your wrapper element. - React: The React component uses a render prop. Pass your wrapper in to the
wrapper
prop, which accepts a callback function with achildren
prop that helps you render your children in placements.
API
Prop | Purpose |
---|---|
condition | Pass a condition to decide whether to wrap an element or not. |
Request improvement for this page