reflexy/TweakableElementWrapper.js

Flexbox layout react components

import React, { Children, cloneElement } from 'react';
import { defaultClassNameTransformer, defaultStyleTransformer } from './utils';
/** Apply props to cloned element */
export default function TweakableElementWrapper({ element, className, style, children, forwardProps = true, ...rest }) {
    const cmp = Children.only(element);
    const nextProps = {
        ...(forwardProps && rest),
        ...cmp.props,
        className: defaultClassNameTransformer(className ?? '', cmp.props.className),
        style: defaultStyleTransformer(style, cmp.props.style),
    };
    // For elements such as input which does not supports children
    if (!cmp.props.children && !children) {
        return cloneElement(cmp, nextProps);
    }
    return cloneElement(cmp, nextProps, children, cmp.props.children);
}