my-swiss-knife: - v1.9.9
    Preparing search index...

    Variable CloneWithPropsConst

    CloneWithProps: FC<
        PropsWithChildren<
            { fallback?: ReactElement; props?: Record<string, unknown> },
        >,
    > = ...

    Safely clones a single React element with additional props.

    • If children is null or undefined, renders fallback.
    • If children is not a valid React element, renders it as-is.
    • If children is a valid element, clones it with sanitized props.

    Prop sanitization rules:

    • null and undefined values are removed.
    • For DOM elements, boolean props are allowed only if they are valid HTML boolean attributes.

    React child to clone.

    Props to merge into the cloned element.

    Fallback element when there is no child.

    A cloned React element, the original child, or the fallback.

    <CloneWithProps props={{ disabled: true }}>
      <button>Submit</button>
    </CloneWithProps>

    <CloneWithProps fallback={<span>No content</span>}>
      {condition && <Input />}
    </CloneWithProps>

    export const CloneWithProps: FC<
      PropsWithChildren<{
        props?: Record<string, unknown>
        fallback?: ReactElement,
      }>
    > = ({ children, fallback, props = {} }) => {
      if (children == null) {
        return <>{fallback}</>
      }
      if (!isValidElement(children)) {
        return <>{children}</>
      }
      const safeProps = sanitizeProps(children, props);
      const mergedProps = { ...(children.props as Record<string, unknown>), ...safeProps };
      return cloneElement(children, mergedProps)
    }

    Settings

    Member Visibility