feat: allow to use React.cloneElement to pass props to child elements

Author: sastan

.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/react-render-callback.cjs.js": {
-    "bundled": 1296,
-    "minified": 744,
-    "gzipped": 404
+    "bundled": 1491,
+    "minified": 820,
+    "gzipped": 431
   },
   "dist/react-render-callback.esm.js": {
-    "bundled": 1150,
-    "minified": 641,
-    "gzipped": 354,
+    "bundled": 1363,
+    "minified": 733,
+    "gzipped": 383,
     "treeshaked": {
       "rollup": {
         "code": 78,
@@ -19,13 +19,13 @@
     }
   },
   "dist/react-render-callback.umd.min.js": {
-    "bundled": 6779,
-    "minified": 3110,
-    "gzipped": 1094
+    "bundled": 6986,
+    "minified": 3178,
+    "gzipped": 1118
   },
   "dist/react-render-callback.umd.js": {
-    "bundled": 11294,
-    "minified": 4707,
-    "gzipped": 1354
+    "bundled": 11501,
+    "minified": 4775,
+    "gzipped": 1379
   }
 }

README.md

@@ -82,7 +82,7 @@ npm install --save react-render-callback
 
 ### API
 
-`render([ renderable [, props ] ])`:
+`render([ renderable [, props [, options ] ] ])`:
 
 - `renderable` (optional): anything that can be rendered like a function, a component, or elements
   - invokes stateless function components (SFC) respecting their
@@ -101,6 +101,18 @@ npm install --save react-render-callback
   - gracefully handles other types like string, array,
     [react elements][create-element], ...
 - `props` (optional): to pass to `renderable` (if renderable is a function or react element type)
+- `options` (optional):
+
+  - `cloneElement` (optional, default: `false`): allows to pass props to
+    the element using [`React.cloneElement`][clone-element]
+
+    ```js
+    render(<a href="#bar">bar</a>, {title: 'foo'})
+    // --> <a href="#bar">bar</a>
+
+    render(<a href="#bar">bar</a>, {title: 'foo'}, {cloneElement: true})
+    // --> <a href="#bar" title="foo">bar</a>
+    ```
 
 **returns**
 
@@ -224,6 +236,7 @@ MIT
 [function-as-children]: https://reactpatterns.com/#function-as-children
 [react-component]: https://reactjs.org/docs/react-component.html
 [create-element]: https://reactjs.org/docs/react-api.html#createelement
+[clone-element]: https://reactjs.org/docs/react-api.html#cloneelement
 [typechecking-with-proptypes]: https://reactjs.org/docs/typechecking-with-proptypes.html
 [prop-types]: https://www.npmjs.com/package/prop-types
 [react-is]: https://www.npmjs.com/package/react-is

src/render.js

@@ -1,4 +1,4 @@
-import {createElement} from 'react'
+import {isValidElement, createElement, cloneElement} from 'react'
 
 import isReactComponent from './internal/isReactComponent'
 
@@ -8,17 +8,29 @@ const isFalsy = value =>
   value === '' ||
   (typeof value === 'number' && isNaN(value))
 
-const result = (maybeFunction, props) =>
-  typeof maybeFunction === 'function'
-    ? maybeFunction({...maybeFunction.defaultProps, ...props})
-    : maybeFunction // must be something else
+const result = (maybeFunction, props, options) => {
+  if (typeof maybeFunction === 'function') {
+    return maybeFunction({...maybeFunction.defaultProps, ...props})
+  }
+
+  if (
+    options &&
+    options.cloneElement &&
+    props &&
+    isValidElement(maybeFunction)
+  ) {
+    return cloneElement(maybeFunction, props)
+  }
+
+  return maybeFunction // must be something else
+}
 
-export default (renderable, props) => {
+export default (renderable, props, options) => {
   if (isReactComponent(renderable)) {
     return createElement(renderable, props)
   }
 
-  const element = result(renderable, props)
+  const element = result(renderable, props, options)
 
   return isFalsy(element) ? null : element
 }

src/render.test.js

@@ -27,6 +27,33 @@ describe('render([renderable[, props]])', () => {
     expect(render(renderable)).toBe(renderable)
   })
 
+  it('should clone element providing additional props', () => {
+    const renderable = <a href="#bar">bar</a>
+    expect(render(renderable, {title: 'foo'}, {cloneElement: true}))
+      .toMatchInlineSnapshot(`
+<a
+  href="#bar"
+  title="foo"
+>
+  bar
+</a>
+`)
+  })
+
+  it('should not clone element by default', () => {
+    const renderable = <a href="#bar">bar</a>
+
+    expect(render(renderable, {title: 'foo'})).toBe(renderable)
+
+    expect(render(renderable, {title: 'foo'})).toMatchInlineSnapshot(`
+<a
+  href="#bar"
+>
+  bar
+</a>
+`)
+  })
+
   describe('should return null for', () => {
     ;[false, null, undefined, NaN, ''].forEach(value => {
       it(`${value}`, () => {