Transform

package.json

@@ -6,7 +6,7 @@
   "jsnext:main": "es/index.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/4Catalyzer/context.git"
+    "url": "https://github.com/4Catalyzer/react-context-toolbox.git"
   },
   "author": "4Catalyzer",
   "license": "MIT",

src/forwardRef.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function forwardRef(
+  renderFn,
+  { displayName, propTypes, defaultProps },
+) {
+  const render = (...args) => renderFn(...args);
+
+  Object.assign(render, { displayName, propTypes, defaultProps });
+  return React.forwardRef(render);
+}

src/mapContextToProps.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import forwardRef from './forwardRef';
 
 const getDisplayName = Component => {
   const name =
@@ -47,9 +48,10 @@ function $mapContextToProps(
   }
 
   const contextTransform = consumers.length === 1 ? singleRender : multiRender;
-  contextTransform.displayName = displayName || getDisplayName(Component);
 
-  return React.forwardRef(contextTransform);
+  return forwardRef(contextTransform, {
+    displayName: displayName || getDisplayName(Component),
+  });
 }
 
 export default function mapContextToProps(maybeOpts, mapToProps, Component) {

src/transformContext.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import forwardRef from './forwardRef';
+
+export default function transformContext(Context) {
+  return forwardRef(
+    props => (
+      <Context.Consumer>
+        {context => (
+          <Context.Provider value={props.mapToValue(context)}>
+            {props.children}
+          </Context.Provider>
+        )}
+      </Context.Consumer>
+    ),
+    { displayName: 'ContextTransformer' },
+  );
+}

test/transformContext.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import transformContext from '../src/transformContext';
+
+describe('transformContext', () => {
+  it('should transform a context value', () => {
+    const Context = React.createContext('foo');
+    const Transformer = transformContext(Context);
+
+    const mapper = jest.fn(value => (value === 'foo' ? value : 'baz'));
+
+    function Inner() {
+      return <Context.Consumer>{v => <div>{v}</div>}</Context.Consumer>;
+    }
+    function Wrapper() {
+      return (
+        <Transformer mapToValue={mapper}>
+          <Inner />
+        </Transformer>
+      );
+    }
+
+    function Nested() {
+      return (
+        <Context.Provider value="quack">
+          <Wrapper />
+        </Context.Provider>
+      );
+    }
+    expect(
+      mount(<Wrapper />)
+        .find('div')
+        .text(),
+    ).toEqual('foo');
+
+    expect(
+      mount(<Nested />)
+        .find('div')
+        .text(),
+    ).toEqual('baz');
+  });
+});