Adding withContext

demo/demos/ContextDemo.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react';
-import { fromRenderProp } from '../../src/ChainableComponent';
-// how to create a context hoc?
 import Step from '../Step';
+import { withContext } from '../../src/lib/withContext';
 
 const { Consumer, Provider } = React.createContext("Default Value");
 
-const withContext = fromRenderProp(Consumer);
-
 const DisplayContext =
-  withContext.render(
+  withContext(Consumer).render(
     context => {
       return (
         <span>
@@ -31,28 +28,25 @@ const ContextDemo = () => (
 export default () => (
   <Step title="React 16 Context Demo">
     <pre className='code-sample'>
-      {`import { fromRenderProp } from 'chainable-components';
-const { Consumer, Provider } = React.createContext("Default Value");
-const withStringContext = fromRenderProp(Consumer);
-
-const DisplayContext =
-withStringContext({ children: a => '' }).render(
-  context => {
-    return (
-      <span>
-        Current context is:
-        <pre>{JSON.stringify(context, null, 2)}</pre>
-      </span>
-    );
-  }
+      {`const DisplayContext =
+  withContext(Consumer).render(
+    context => {
+      return (
+        <span>
+          Current context is:
+          <pre>{JSON.stringify(context, null, 2)}</pre>
+        </span>
+      );
+    }
+  );
 
 const ContextDemo = () => (
-<div>
-  {DisplayContext}
-  <Provider value="Overriden value">
+  <div>
     {DisplayContext}
-  </Provider>
-</div>
+    <Provider value="Overriden value">
+      {DisplayContext}
+    </Provider>
+  </div>
 );`}
     </pre>
     <ContextDemo />

src/lib/withContext.ts

@@ -0,0 +1,6 @@
+import { Consumer } from 'react';
+import { ChainableComponent, fromRenderProp, RenderPropsProps } from '../ChainableComponent';
+
+export function withContext<A>(consumer: Consumer<A>): ChainableComponent<A> {
+    return fromRenderProp<A>(consumer)
+}