Widgets
Conditional Wrapper

Conditional Wrapper

Conditionally wrap elements with another component.

Example content wrapped inside Panel

Anatomy

import { ConditionalWrapper } from "@lualtek/react-components";
 
export default () => {
  return (
    <ConditionalWrapper
      condition={true}
      wrapper={(children) => <div>{children}</div>}
    >
      Content wrapped inside div when condition matches
    </ConditionalWrapper>
  );
};

API Reference

export type ConditionalWrapperProps = {
  /**
   * The condition to determine if the children should be wrapped.
  */
  condition: boolean;
  /**
   * The wrapper component to wrap the children.
  */
  wrapper: (children: ReactNode) => ReactNode;
  /**
   * The children to be wrapped.
  */
  children: ReactNode;
}