actual init

Author: artanik

.gitignore

@@ -1,3 +1,6 @@
+/dist
+yarn.lock
+
 # Logs
 logs
 *.log

README.md

@@ -1,2 +1,3 @@
-# react-with-context-in-props
-Use withContext to easily pass multiple contexts to component's props
+# react-with-multiple-contexts
+
+withContextConsumer, withContextProvider

index.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+type functionalComponent = (props: any) => React.ReactNode;
+type Component = React.Component | React.ComponentClass | React.PureComponent | functionalComponent;
+
+export function withContextConsumer(Component: Component, contexts: {[key: string]: any}): React.ReactNode;
+
+export function withContextProvider(Component: Component,
+	 getContexts: (props: {[key: string]: any}) => Array<{
+		context: React.Context<any>,
+		value: any
+	}>):React.ReactNode;

index.test-d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { expectType } from 'tsd-check';
+import { withContextConsumer, withContextProvider } from '.';
+
+export const context = React.createContext({});
+
+class Component extends React.Component {
+	render() {
+		return React.createElement('div', null, this.props.children);
+	}
+}
+
+const DummyComponent = () => React.createElement('div');
+
+expectType<React.ReactNode>(withContextConsumer(Component, { context }));
+expectType<React.ReactNode>(withContextProvider(DummyComponent, ({ value }) => ([
+	{ context, value }
+])));

package.json

@@ -0,0 +1,69 @@
+{
+  "name": "react-with-multiple-contexts",
+  "version": "1.0.0",
+  "description": "Use withContextConsumer to easily pass multiple contexts to component's props",
+  "main": "dist/index.js",
+  "scripts": {
+    "test": "tsd-check",
+    "build": "mkdir -p dist && ./node_modules/.bin/babel src --out-file dist/index.js",
+    "prepublishOnly": "npm run build"
+  },
+  "typings": "index.d.ts",
+  "files": [
+    "dist",
+    "index.d.ts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/artanik/react-with-multiple-contexts.git"
+  },
+  "author": {
+    "name": "Artem Anikeev",
+    "email": "artanik94@gmail.com",
+    "url": "https://artanik.github.io"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/artanik/react-with-context-in-props/issues"
+  },
+  "keywords": [
+    "react",
+    "extras",
+    "component",
+    "components",
+    "util",
+    "utils",
+    "utilities",
+    "helper",
+    "helpers",
+    "auto-bind",
+    "autobind",
+    "bind",
+    "class",
+    "css",
+    "classname",
+    "classnames",
+    "classes"
+  ],
+  "homepage": "https://github.com/artanik/react-with-context-in-props#readme",
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "tsd-check": "^0.3.0",
+    "@types/react": "^16.8.1"
+  },
+  "peerDependencies": {
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+  }
+}

src/index.js

@@ -0,0 +1,62 @@
+import React from 'react';
+
+function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+function enhance (name, fn) {
+  fn.displayName = name;
+  return React.forwardRef(fn);
+}
+
+function withName (Component, props) {
+  Component.displayName = getDisplayName(Component);
+  return <Component {...props} />;
+}
+
+const drop = (a, i = 1) => (a && a.length) ? a.slice(i, a.length) : [];
+const head = a => (a && a.length) ? a[0] : undefined;
+
+export function withContextConsumer (Component, contexts) {
+  return enhance(`WithContextConsumer(${getDisplayName(Component)})`, (props, ref) => {
+    const applyConsumer = (contextEntries, contextProps = {}) => {
+      if (contextEntries.length !== 0) {
+        const [contextName, ContextComponent] = head(contextEntries);
+        return (
+          <ContextComponent.Consumer>
+            {context => (
+              applyConsumer(
+                drop(contextEntries),
+                { [contextName]: context, ...contextProps },
+              )
+            )}
+          </ContextComponent.Consumer>
+        );
+      }
+  
+      return withName(Component, {...props, ...contextProps, ref})
+    };
+  
+    return applyConsumer(Object.entries(contexts));
+  });
+}
+
+export function withContextProvider (Component, getContexts) {
+  return enhance(`WithContextProvider(${getDisplayName(Component)})`, (props, ref) => {
+    const contexts = getContexts(props);
+    const applyProvider = (contexts) => {
+      if (contexts.length !== 0) {
+        const { context: ContextComponent, value } = head(contexts);
+        return (
+          <ContextComponent.Provider value={value}>
+            {applyProvider(drop(contexts))}
+          </ContextComponent.Provider>
+        );
+      }
+  
+      return withName(Component, {...props, ref});
+    };
+
+    return applyProvider(contexts);
+  });
+}