diff --git a/demo/demos/DoRenderDemo.tsx b/demo/demos/DoRenderDemo.tsx
new file mode 100644
index 0000000..2b16e09
--- /dev/null
+++ b/demo/demos/DoRenderDemo.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { withState } from '../../src/lib/withState';
+import { ChainableComponent } from '../../src/ChainableComponent';
+import Step from '../Step';
+
+export const DoRenderDemo =
+ ChainableComponent.DoRender(
+ withState(5),
+ () => withState(5),
+ () => withState('foo'),
+ (foo, inner, outer) =>
+
+ {foo.value}
+
outer: {outer.value}
+
+
+
inner: {inner.value}
+
+
+ )
+
+export default () => (
+
+
+ {`import { withState, ChainableComponent } from 'chainable-components';
+
+ChainableComponent.DoRender(
+ withState(5),
+ () => withState(5),
+ () => withState('foo'),
+ (foo, inner, outer) =>
+
+ {foo.value}
+
outer: {outer.value}
+
+
+
inner: {inner.value}
+
+
+ )`}
+
+ {DoRenderDemo}
+
+);
diff --git a/src/ChainableComponent.ts b/src/ChainableComponent.ts
index 224a6b6..f79e385 100644
--- a/src/ChainableComponent.ts
+++ b/src/ChainableComponent.ts
@@ -404,6 +404,66 @@ function Do(a: ChainableComponent, ...fns: Function[]): ChainableComponent<
return doIt(a.map(a2 => [a2]), fns);
}
+function DoRender(
+ c: ChainableComponent,
+ f1: (t1: T1) => React.ReactNode,
+): React.ReactNode
+
+function DoRender(
+ c: ChainableComponent,
+ f1: (t1: T1) => ChainableComponent,
+ z: (t2: T2, t1: T1) => React.ReactNode
+): React.ReactNode
+
+function DoRender(
+ c: ChainableComponent,
+ f1: (t1: T1) => ChainableComponent,
+ f2: (t2: T2, t1: T1) => ChainableComponent,
+ z: (t3: T3, t2: T2, t1: T1) => React.ReactNode
+): React.ReactNode
+
+function DoRender(
+ c: ChainableComponent,
+ f1: (t1: T1) => ChainableComponent,
+ f2: (t2: T2, t1: T1) => ChainableComponent,
+ f3: (t3: T3, t2: T2, t1: T1) => ChainableComponent,
+ z: (t4: T4, t3: T3, t2: T2, t1: T1) => React.ReactNode
+): React.ReactNode
+
+function DoRender(
+ c: ChainableComponent,
+ f1: (t1: T1) => ChainableComponent,
+ f2: (t2: T2, t1: T1) => ChainableComponent,
+ f3: (t3: T3, t2: T2, t1: T1) => ChainableComponent,
+ f4: (t4: T4, t3: T3, t2: T2, t1: T1) => ChainableComponent,
+ z: (t5: T5, t4: T4, t3: T3, t2: T2, t1: T1) => React.ReactNode
+): React.ReactNode
+
+function DoRender(
+ c: ChainableComponent,
+ f1: (t1: T1) => ChainableComponent,
+ f2: (t2: T2, t1: T1) => ChainableComponent,
+ f3: (t3: T3, t2: T2, t1: T1) => ChainableComponent,
+ f4: (t4: T4, t3: T3, t2: T2, t1: T1) => ChainableComponent,
+ f5: (t5: T5, t4: T4, t3: T3, t2: T2, t1: T1) => ChainableComponent,
+ z: (t6: T6, t5: T5, t4: T4, t3: T3, t2: T2, t1: T1) => React.ReactNode
+): React.ReactNode
+
+function DoRender(a: ChainableComponent, ...fns: Function[]): React.ReactNode {
+ function doIt(as: ChainableComponent, fns: Function[]): any {
+ const [fn, ...rest] = fns;
+ if(rest.length === 0) {
+ return as.render(a2s => fn.apply(null, a2s));
+ } else {
+ return as.render(a2s => {
+ const aPrime = fn.apply(null, a2s);
+ return doIt(aPrime.map((aP: any) => [aP, ...a2s]), rest);
+ });
+ }
+ }
+ return doIt(a.map(a2 => [a2]), fns);
+}
+
const isChainableComponent = (a: any) => {
return typeof a.chain === 'function' &&
typeof a.map === 'function' &&
@@ -424,4 +484,5 @@ export const ChainableComponent = {
'fantasy-land/of': of,
all,
Do,
+ DoRender
};