React Clone

Declarative element cloning for React.

Installation

Using npm:

$ npm install react-clone

Then with a module bundler like webpack that supports either CommonJS or ES2015 modules, use as you would anything else:

// using an ES6 transpiler, like babel
import Clone from 'react-clone'
 
// not using an ES6 transpiler
var Clone = require('react-clone').default

The UMD build is also available on npmcdn. You can find the library on window.ReactClone.

<script src="https://npmcdn.com/react-clone/umd/ReactClone.min.js"></script>

Usage

const button = <button/>
 
// instead of this:
<div>
  {React.cloneElement(button, { onClick: handleClick })}
</div>
 
// you can keep it declarative like this:
<div>
  <Clone element={button} onClick={handleClick}/>
</div>
 
// it's mostly useful for passing extra props to children
// like animating the children of a React Router
// route component's children (gotta add that key)
<Clone
  element={this.props.children}
  key={location.pathname}
/>
 
// or iterating over children
React.Children.map(this.props.children, (child, index) => {
  return <Clone element={child} index={index}/>
})