Support the render prop given as children too

Author: gnapse

README.md

@@ -145,6 +145,8 @@ The most important thing you have to tell to `Treefold` besides the actual tree
 />
 ```
 
+> You can also pass it as the `children` prop if you prefer to do things that way `<Treefold>{/* right here*/}</Treefold>`
+
 `Treefold` takes care of calling this function as it traverses the tree, and passes to it an object (`props` in the example just above) with the properties documented below:
 
 ### node

src/Treefold.js

@@ -7,7 +7,8 @@ import ToggleController from './ToggleController';
 class Treefold extends Component {
   static propTypes = {
     nodes: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
-    render: PropTypes.func.isRequired,
+    render: PropTypes.func,
+    children: PropTypes.func,
     isNodeExpanded: PropTypes.func,
     onToggleExpand: PropTypes.func,
     getNodeId: PropTypes.func,
@@ -29,18 +30,21 @@ class Treefold extends Component {
   }
 
   internalRender = ({ isOn, onToggle }) => {
-    const { nodes, render, getNodeId, getNodeChildren } = this.props;
-    return nodes.map(node =>
-      React.createElement(Node, {
-        key: getNodeId(node),
-        node,
-        render,
-        getNodeId,
-        getNodeChildren,
-        isNodeExpanded: isOn,
-        onToggleExpand: onToggle,
-      })
-    );
+    const { nodes, getNodeId, getNodeChildren } = this.props;
+    const render = getRenderProp(this.props);
+    return render
+      ? nodes.map(node =>
+          React.createElement(Node, {
+            key: getNodeId(node),
+            node,
+            render,
+            getNodeId,
+            getNodeChildren,
+            isNodeExpanded: isOn,
+            onToggleExpand: onToggle,
+          })
+        )
+      : null;
   };
 
   render() {
@@ -58,11 +62,25 @@ class Treefold extends Component {
   }
 }
 
-function checkProps({ isNodeExpanded, onToggleExpand }) {
+function getRenderProp({ render, children }) {
+  return typeof render === 'function'
+    ? render
+    : typeof children === 'function' ? children : null;
+}
+
+function checkProps({ isNodeExpanded, onToggleExpand, render, children }) {
   warning(
     typeof isNodeExpanded === typeof onToggleExpand,
     'Treefold: You must pass both isNodeExpanded and onToggleExpand, or none.'
   );
+  warning(
+    !(typeof render === 'function' && typeof children === 'function'),
+    'You should not use <Treefold render /> and <Treefold>{children}</Treefold> in the same Treefold component; `children` will be ignored'
+  );
+  warning(
+    !(typeof render !== 'function' && typeof children !== 'function'),
+    'You should specify one of <Treefold render /> or <Treefold>{children}</Treefold>; your component will render nothing unless you do so'
+  );
 }
 
 export default Treefold;

storybook/UnorderedList.js

@@ -4,9 +4,8 @@ import './styles.css';
 
 const UnorderedList = props => (
   <ul className="unordered-list">
-    <Treefold
-      {...props}
-      render={({
+    <Treefold {...props}>
+      {({
         node,
         isFolder,
         isExpanded,
@@ -33,7 +32,7 @@ const UnorderedList = props => (
           )}
         </li>
       )}
-    />
+    </Treefold>
   </ul>
 );
 

tests/Treefold.test.js

@@ -51,46 +51,43 @@ const buildNodes = ({ idKey = 'id', childrenKey = 'children' } = {}) => [
 
 const defaultNodes = buildNodes();
 
-const Tree = props => (
-  <Treefold
-    {...props}
-    render={({
-      node,
-      isFolder,
-      isExpanded,
-      getToggleProps,
-      hasChildNodes,
-      renderChildNodes,
-    }) => (
-      <li>
-        {isFolder ? (
-          <a
-            id={node.id}
-            href="#"
-            {...getToggleProps()}
-            className={
-              isExpanded ? 'item folder expanded' : 'item folder collapsed'
-            }
-          >
-            {node.name}
-          </a>
+const Node = ({
+  node,
+  isFolder,
+  isExpanded,
+  getToggleProps,
+  hasChildNodes,
+  renderChildNodes,
+}) => (
+  <li>
+    {isFolder ? (
+      <a
+        id={node.id}
+        href="#"
+        {...getToggleProps()}
+        className={
+          isExpanded ? 'item folder expanded' : 'item folder collapsed'
+        }
+      >
+        {node.name}
+      </a>
+    ) : (
+      <span className="item leaf">{node.name}</span>
+    )}
+    {isExpanded && (
+      <ul>
+        {hasChildNodes ? (
+          renderChildNodes()
         ) : (
-          <span className="item leaf">{node.name}</span>
-        )}
-        {isExpanded && (
-          <ul>
-            {hasChildNodes ? (
-              renderChildNodes()
-            ) : (
-              <li className="empty">Empty node</li>
-            )}
-          </ul>
+          <li className="empty">Empty node</li>
         )}
-      </li>
+      </ul>
     )}
-  />
+  </li>
 );
 
+const Tree = props => <Treefold {...props} render={Node} />;
+
 const setup = ({ expanded = [], nodes = defaultNodes, ...props } = {}) => {
   const isNodeExpanded = item =>
     expanded.includes(props.getNodeId ? props.getNodeId(item) : item.id);
@@ -174,4 +171,19 @@ describe('Treefold', () => {
       expect(wrapper.find('.item')).toHaveLength(3);
     });
   });
+
+  describe('render prop', () => {
+    it('can be given via the children prop', () => {
+      const wrapper = mount(
+        <Treefold
+          nodes={defaultNodes}
+          onToggleExpand={() => {}}
+          isNodeExpanded={() => true}
+        >
+          {Node}
+        </Treefold>
+      );
+      expect(wrapper.find('.item')).toHaveLength(12);
+    });
+  });
 });