react-safe-clone

Declarative element cloning for React that doesn't overwrite props on child elements.

Usage

# Install with yarn or npm
yarn add react-safe-clone

import SafeClone from 'react-safe-clone';

class Interaction extends React.Component {
  handleOnClick = () => {
    // ...
  }

  render() {
    return (
      <SafeClone onClick={this.handleOnClick}>
        {this.props.children}
      </SafeClone>
    );
  }
}

const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

// Potential usage in a component that has a `handleOnClick` method
// defined. Here, the `onClick` defined in `Interaction` will not overwrite
// the Button's `onClick` due to `SafeClone`.
<Interaction>
  <Button onClick={handleOnClick} />
</Interaction>