Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-adopt
Advanced tools
react-adopt - npm Package Compare versions
Comparing version 0.3.1 to 0.3.2
@@ -18,2 +18,6 @@ /// <reference types="react" /> | ||
| }; | ||
| export declare const Adopt: React.SFC<AdoptProps<any, any>>; | ||
| export declare class Adopt extends React.Component<AdoptProps<any, any>> { | ||
| Composed: React.ComponentType<any>; | ||
| constructor(props: any); | ||
| render(): JSX.Element; | ||
| } |
@@ -1,2 +0,2 @@ | ||
| "use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var React=_interopDefault(require("react")),__assign=Object.assign||function(e){for(var r,t=1,n=arguments.length;n>t;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e};function __rest(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&0>r.indexOf(n)&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);n.length>o;o++)0>r.indexOf(n[o])&&(t[n[o]]=e[n[o]])}return t}var values=Object.values,keys=Object.keys,assign=Object.assign;function omit(e,r){return keys(r).filter(function(r){return-1===e.indexOf(r)}).reduce(function(e,t){return __assign({},e,((n={})[t]=r[t],n));var n},{})}function prop(e,r){return r[e]}var isFn=function(e){return!!e&&"function"==typeof e},isValidRenderProp=function(e){return React.isValidElement(e)||isFn(e)};function adopt(e){if(!values(e).some(isValidRenderProp))throw Error("The render props object mapper just accept valid elements as value");return keys(e).reduce(function(r,t){return function(n){var o=n.children,i=__rest(n,["children"]);return React.createElement(r,__assign({},i),function(r){var n=prop(t,e),a=omit(keys(i),r),c=function(e){return isFn(o)?o(assign({},a,((r={})[t]=e,r))):null;var r};return isFn(n)?React.createElement(n,assign({},i,r,{render:c})):React.cloneElement(n,null,c)})}},function(e){var r=e.children,t=__rest(e,["children"]);return isFn(r)&&r(t)})}var Adopt=function(e){var r=adopt(e.mapper),t=omit(["children","mapper"],e);return React.createElement(r,__assign({},t),e.children)};exports.adopt=adopt,exports.Adopt=Adopt; | ||
| "use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var React=_interopDefault(require("react")),extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])};function __extends(e,t){function r(){this.constructor=e}extendStatics(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var __assign=Object.assign||function(e){for(var t,r=1,n=arguments.length;n>r;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e};function __rest(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&0>t.indexOf(n)&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);n.length>o;o++)0>t.indexOf(n[o])&&(r[n[o]]=e[n[o]])}return r}var values=Object.values,keys=Object.keys,assign=Object.assign;function omit(e,t){return keys(t).filter(function(t){return-1===e.indexOf(t)}).reduce(function(e,r){return __assign({},e,((n={})[r]=t[r],n));var n},{})}function prop(e,t){return t[e]}var isFn=function(e){return!!e&&"function"==typeof e},isValidRenderProp=function(e){return React.isValidElement(e)||isFn(e)};function adopt(e){if(!values(e).some(isValidRenderProp))throw Error("The render props object mapper just accept valid elements as value");return keys(e).reduce(function(t,r){return function(n){var o=n.children,i=__rest(n,["children"]);return React.createElement(t,__assign({},i),function(t){var n=prop(r,e),a=omit(keys(i),t),s=function(e){return isFn(o)?o(assign({},a,((t={})[r]=e,t))):null;var t};return isFn(n)?React.createElement(n,assign({},i,t,{render:s})):React.cloneElement(n,null,s)})}},function(e){var t=e.children,r=__rest(e,["children"]);return isFn(t)&&t(r)})}var Adopt=function(e){function t(t){var r=e.call(this,t)||this;return r.Composed=adopt(t.mapper),r}return __extends(t,e),t.prototype.render=function(){var e=this.props,t=__rest(e,["mapper"]);return React.createElement(this.Composed,__assign({},t))},t}(React.Component);exports.adopt=adopt,exports.Adopt=Adopt; | ||
| //# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
| import React from"react";var __assign=Object.assign||function(e){for(var r,n=1,t=arguments.length;t>n;n++)for(var i in r=arguments[n])Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i]);return e};function __rest(e,r){var n={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&0>r.indexOf(t)&&(n[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(t=Object.getOwnPropertySymbols(e);t.length>i;i++)0>r.indexOf(t[i])&&(n[t[i]]=e[t[i]])}return n}var values=Object.values,keys=Object.keys,assign=Object.assign;function omit(e,r){return keys(r).filter(function(r){return-1===e.indexOf(r)}).reduce(function(e,n){return __assign({},e,((t={})[n]=r[n],t));var t},{})}function prop(e,r){return r[e]}var isFn=function(e){return!!e&&"function"==typeof e},isValidRenderProp=function(e){return React.isValidElement(e)||isFn(e)};function adopt(e){if(!values(e).some(isValidRenderProp))throw Error("The render props object mapper just accept valid elements as value");return keys(e).reduce(function(r,n){return function(t){var i=t.children,a=__rest(t,["children"]);return React.createElement(r,__assign({},a),function(r){var t=prop(n,e),o=omit(keys(a),r),c=function(e){return isFn(i)?i(assign({},o,((r={})[n]=e,r))):null;var r};return isFn(t)?React.createElement(t,assign({},a,r,{render:c})):React.cloneElement(t,null,c)})}},function(e){var r=e.children,n=__rest(e,["children"]);return isFn(r)&&r(n)})}var Adopt=function(e){var r=adopt(e.mapper),n=omit(["children","mapper"],e);return React.createElement(r,__assign({},n),e.children)};export{adopt,Adopt}; | ||
| import React from"react";var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])};function __extends(e,t){function n(){this.constructor=e}extendStatics(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var __assign=Object.assign||function(e){for(var t,n=1,r=arguments.length;r>n;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e};function __rest(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);r.length>o;o++)0>t.indexOf(r[o])&&(n[r[o]]=e[r[o]])}return n}var values=Object.values,keys=Object.keys,assign=Object.assign;function omit(e,t){return keys(t).filter(function(t){return-1===e.indexOf(t)}).reduce(function(e,n){return __assign({},e,((r={})[n]=t[n],r));var r},{})}function prop(e,t){return t[e]}var isFn=function(e){return!!e&&"function"==typeof e},isValidRenderProp=function(e){return React.isValidElement(e)||isFn(e)};function adopt(e){if(!values(e).some(isValidRenderProp))throw Error("The render props object mapper just accept valid elements as value");return keys(e).reduce(function(t,n){return function(r){var o=r.children,i=__rest(r,["children"]);return React.createElement(t,__assign({},i),function(t){var r=prop(n,e),a=omit(keys(i),t),c=function(e){return isFn(o)?o(assign({},a,((t={})[n]=e,t))):null;var t};return isFn(r)?React.createElement(r,assign({},i,t,{render:c})):React.cloneElement(r,null,c)})}},function(e){var t=e.children,n=__rest(e,["children"]);return isFn(t)&&t(n)})}var Adopt=function(e){function t(t){var n=e.call(this,t)||this;return n.Composed=adopt(t.mapper),n}return __extends(t,e),t.prototype.render=function(){var e=this.props,t=__rest(e,["mapper"]);return React.createElement(this.Composed,__assign({},t))},t}(React.Component);export{adopt,Adopt}; | ||
| //# sourceMappingURL=index.m.js.map |
@@ -1,2 +0,2 @@ | ||
| "use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var React=_interopDefault(require("react")),__assign=Object.assign||function(e){for(var r,t=1,n=arguments.length;n>t;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e};function __rest(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&0>r.indexOf(n)&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);n.length>o;o++)0>r.indexOf(n[o])&&(t[n[o]]=e[n[o]])}return t}var values=Object.values,keys=Object.keys,assign=Object.assign;function omit(e,r){return keys(r).filter(function(r){return-1===e.indexOf(r)}).reduce(function(e,t){return __assign({},e,((n={})[t]=r[t],n));var n},{})}function prop(e,r){return r[e]}var isFn=function(e){return!!e&&"function"==typeof e},isValidRenderProp=function(e){return React.isValidElement(e)||isFn(e)};function adopt(e){if(!values(e).some(isValidRenderProp))throw Error("The render props object mapper just accept valid elements as value");return keys(e).reduce(function(r,t){return function(n){var o=n.children,i=__rest(n,["children"]);return React.createElement(r,__assign({},i),function(r){var n=prop(t,e),a=omit(keys(i),r),c=function(e){return isFn(o)?o(assign({},a,((r={})[t]=e,r))):null;var r};return isFn(n)?React.createElement(n,assign({},i,r,{render:c})):React.cloneElement(n,null,c)})}},function(e){var r=e.children,t=__rest(e,["children"]);return isFn(r)&&r(t)})}var Adopt=function(e){var r=adopt(e.mapper),t=omit(["children","mapper"],e);return React.createElement(r,__assign({},t),e.children)};exports.adopt=adopt,exports.Adopt=Adopt; | ||
| "use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var React=_interopDefault(require("react")),extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])};function __extends(e,t){function r(){this.constructor=e}extendStatics(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var __assign=Object.assign||function(e){for(var t,r=1,n=arguments.length;n>r;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e};function __rest(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&0>t.indexOf(n)&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);n.length>o;o++)0>t.indexOf(n[o])&&(r[n[o]]=e[n[o]])}return r}var values=Object.values,keys=Object.keys,assign=Object.assign;function omit(e,t){return keys(t).filter(function(t){return-1===e.indexOf(t)}).reduce(function(e,r){return __assign({},e,((n={})[r]=t[r],n));var n},{})}function prop(e,t){return t[e]}var isFn=function(e){return!!e&&"function"==typeof e},isValidRenderProp=function(e){return React.isValidElement(e)||isFn(e)};function adopt(e){if(!values(e).some(isValidRenderProp))throw Error("The render props object mapper just accept valid elements as value");return keys(e).reduce(function(t,r){return function(n){var o=n.children,i=__rest(n,["children"]);return React.createElement(t,__assign({},i),function(t){var n=prop(r,e),a=omit(keys(i),t),s=function(e){return isFn(o)?o(assign({},a,((t={})[r]=e,t))):null;var t};return isFn(n)?React.createElement(n,assign({},i,t,{render:s})):React.cloneElement(n,null,s)})}},function(e){var t=e.children,r=__rest(e,["children"]);return isFn(t)&&t(r)})}var Adopt=function(e){function t(t){var r=e.call(this,t)||this;return r.Composed=adopt(t.mapper),r}return __extends(t,e),t.prototype.render=function(){var e=this.props,t=__rest(e,["mapper"]);return React.createElement(this.Composed,__assign({},t))},t}(React.Component);exports.adopt=adopt,exports.Adopt=Adopt; | ||
| //# sourceMappingURL=index.umd.js.map |
| { | ||
| "name": "react-adopt", | ||
| "version": "0.3.1", | ||
| "version": "0.3.2", | ||
| "main": "dist/index.js", | ||
@@ -5,0 +5,0 @@ "umd:main": "dist/index.umd.js", |
@@ -23,3 +23,3 @@ :sunglasses: _**React Adopt -**_ Compose render props components like a pro | ||
| [Render Props](https://reactjs.org/docs/render-props.html) are the new hype of React's ecosystem, that's a fact. So, when you need to use more than one render props component together, this can be boring and generate something called a *"render props callback hell"*, like that: | ||
| [Render Props](https://reactjs.org/docs/render-props.html) are the new hype of React's ecosystem, that's a fact. So, when you need to use more than one render props component together, this can be boring and generate something called a *"render props callback hell"*, like this: | ||
@@ -33,3 +33,3 @@  | ||
| React Adopt is just a simple method that you can compose your components and return just one component that will be a render prop component that combining each prop result from your mapper. | ||
| React Adopt is a simple method that composes multiple render prop components, combining each prop result from your mapper. | ||
@@ -50,3 +50,3 @@ ## 📟 Demos | ||
| Now you can use adopt to compose your components. See bellow an example using the awesome [react-powerplug](https://github.com/renatorib/react-powerplug): | ||
| Now you can use React Adopt to compose your components. See below for an example using the awesome [react-powerplug](https://github.com/renatorib/react-powerplug): | ||
@@ -57,5 +57,5 @@  | ||
| One of use case that React Adopt can fit perfectly is when you need to use [new React's context api](https://reactjs.org/docs/context.html) that use render props to create some context: | ||
| One use case that React Adopt can fit perfectly is when you need to use [React's new context api](https://reactjs.org/docs/context.html) that use render props to create some context: | ||
| ```js | ||
| ```jsx | ||
| import React from 'react' | ||
@@ -77,9 +77,9 @@ import { adopt } from 'react-adopt' | ||
| See [this demo](https://codesandbox.io/s/qv3m6yk2n4?hidenavigation=1) for a better comprehension | ||
| See [this demo](https://codesandbox.io/s/qv3m6yk2n4?hidenavigation=1) for a better explanation. | ||
| ### Custom render and retrieving props from composed | ||
| Some components don't use the prop called `children` to make work render props. For cases like that, when you define your mapper you can pass a simple function as mapper value that will return your component, instead of a jsx element. This function will receive a prop `render` that will be responsible to make render, the props passed on `Composed` component and the previous values from each mapper. See an example: | ||
| Some components don't use the `children` prop for render props to work. For cases like this, you can pass a function instead of a jsx element to your mapper. This function will receive a `render` prop that will be responsible for your render, the props passed on `Composed` component, and the previous values from each mapper. See an example: | ||
| ```js | ||
| ```jsx | ||
| import { adopt } from 'react-adopt' | ||
@@ -99,6 +99,6 @@ import MyCustomRenderProps from 'my-custom-render-props' | ||
| And as I said above, you can retrieve the properties passed to the composed component using that way too: | ||
| You can also retrieve the properties passed to the composed component this way too: | ||
| ```js | ||
| ```jsx | ||
| import { adopt } from 'react-adopt' | ||
@@ -122,3 +122,3 @@ import { Value } from 'react-powerplug' | ||
| ```js | ||
| ```jsx | ||
| import { adopt } from 'react-adopt' | ||
@@ -143,5 +143,5 @@ | ||
| ### Leading with multiples params | ||
| ### Leading with multiple params | ||
| Some render props components return multiple arguments in the children function instead of single one, a simple example in the new [Query](https://www.apollographql.com/docs/react/essentials/queries.html#basic) and [Mutation](https://www.apollographql.com/docs/react/essentials/mutations.html) component from `react-apollo`. In that case, what you can do is a arbitrary render with `render` prop [using you map value as a function](#custom-render-and-retrieving-props-from-composed): | ||
| Some render props components return multiple arguments in the children function instead of a single one (see a simple example in the new [Query](https://www.apollographql.com/docs/react/essentials/queries.html#basic) and [Mutation](https://www.apollographql.com/docs/react/essentials/mutations.html) component from `react-apollo`). In this case, you can do an arbitrary render with `render` prop [using your map value as a function](#custom-render-and-retrieving-props-from-composed): | ||
@@ -156,3 +156,3 @@ ```js | ||
| <Mutation mutation={ADD_TODO}> | ||
| {/* that's is arbitrary render where you will pass your two arguments into single one */} | ||
| {/* this is an arbitrary render where you will pass your two arguments into a single one */} | ||
| {(mutation, result) => render({ mutation, result })} | ||
@@ -173,7 +173,7 @@ </Mutation> | ||
| See [this demo](https://codesandbox.io/s/3x7n8wyp15?hidenavigation=1) for a complete explanation about that. | ||
| See [this demo](https://codesandbox.io/s/3x7n8wyp15?hidenavigation=1) for a complete explanation about multiple params.. | ||
| ### Typescript support | ||
| React adopt has a fully typescript support when you need to type the composed component: | ||
| React Adopt has full typescript support when you need to type the composed component: | ||
@@ -210,3 +210,3 @@ ```ts | ||
| If you dont care about [typings](#typescript-support) and need something more easy and quick, you can choose to use a inline composition by importing `<Adopt>` component and passing your mapper as prop: | ||
| If you dont care about [typings](#typescript-support) and need something more easy and quick, you can choose to use an inline composition by importing the `<Adopt>` component and passing your mapper as a prop: | ||
@@ -213,0 +213,0 @@ ```js |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by9.83%
20752
- Lines of code
- increased by24.39%
51
No dependency changes