{"_id":"@4react/responsive","_rev":"1-908bf92d8c46d5dd03e216746d01d51d","name":"@4react/responsive","dist-tags":{"latest":"2020.1.0"},"versions":{"2020.1.0":{"name":"@4react/responsive","version":"2020.1.0","author":{"name":"Matteo Zanoncello"},"license":"ISC","repository":{"url":"git+https://github.com/4react/responsive.git"},"main":"lib/responsive.js","module":"lib/responsive.module.js","types":"lib/types","scripts":{"clean":"rimraf lib","rollup":"rollup -c","build":"npm run clean && npm run rollup","story":"start-storybook -p 9009 -s .storybook/public","prepublish":"npm run build"},"dependencies":{"@4react/errors":"^2020.1.3","@4react/hooks":"^2020.1.9","lodash":"^4.17.19","react":"^16.10.2"},"peerDependencies":{"@4react/errors":"^2020.1.3","@4react/hooks":"^2020.1.9","react":"^16.10.2"},"devDependencies":{"@4react/eslint-config":"^2020.1.3","@babel/polyfill":"latest","@babel/preset-env":"^7.7.1","@babel/preset-react":"^7.7.0","@babel/preset-typescript":"^7.7.0","@storybook/addon-actions":"^5.3.17","@storybook/addon-knobs":"^5.3.17","@storybook/addon-viewport":"^5.3.17","@storybook/preset-typescript":"^1.2.0","@storybook/react":"^5.3.17","@types/lodash":"^4.14.149","@typescript-eslint/parser":"^2.26.0","babel-loader":"^8.0.6","eslint":"^6.6.0","react-docgen-typescript-loader":"^3.6.0","rimraf":"^3.0.0","rollup":"^1.26.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-eslint":"^7.0.0","rollup-plugin-postcss":"^2.0.3","rollup-plugin-typescript2":"^0.25.2","ts-loader":"^6.2.1","typescript":"^3.7.5"},"gitHead":"9660e815839863ec994543f1bc96ba2a1beaf03c","description":"Responsiveness for React Applications.","bugs":{"url":"https://github.com/4react/responsive/issues"},"homepage":"https://github.com/4react/responsive#readme","_id":"@4react/responsive@2020.1.0","_nodeVersion":"14.0.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-4mqb9zCWw4iEI7PRZv1h8cEYLXlWo1GwBzH21pfdrdYCPpGSRPNwncmi/HbVdJG/fXbNWynlgaYMcJiHZ3WHbw==","shasum":"12b1cf4a4463b30303dcf4728716cdb9b9466b7b","tarball":"https://registry.npmjs.org/@4react/responsive/-/responsive-2020.1.0.tgz","fileCount":18,"unpackedSize":30718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFAtuCRA9TVsSAnZWagAA/YUP+QCHXDTZkoP8yuU6c1AN\nRtc9u7uSHFLsXPUSs1X9NBt3I3sTEhlRug/EBY8tfFGa4GXStiRztbdu/jsm\nXQ38mfFMlgzA4c8hha/2EhONbOe/SwNvdkpMNGUKpiBSJOlSH82kfqAYlZxP\nAUPAdBfiPi6rcFA72BWMZKRh2mIjujewROvz9njl00Omk/Qq1zndK2Q+l6RQ\n5ATpXTgzFJWA1ZijK6cOyq3VIWverlhphceSRuXnShEBSrE3xtgVG+FwEB5I\nBS3uk+1rK2Pb4rFrsM0TmNLd+PdRbKQ2+hvf5NT5VubBIVJua+KHyqmr2NOE\nd6/1qvkBBhnZxZwixB+4oilbiUq9afPWV2HEYRPPdCt9ldrdgP/IAD+8m4nK\nqu0/LdkkACqogPZTo6vVvOGY8DGik32+ltSiRCj7b8jQ7SbE8hbPymkInhaH\nzjYRP77uXBvnPSbspZF4DAUyIPZCQJsK+EhTv5STjXbBdKd3ronoVSktIlyM\n/3pzNS24c0PoZVsvC3Zcw4F9QAJZjxbjsiOR9FZhTL35/O0l/3AfZ3+YrT//\nCkDMWJ++1hyvRd4YHUoCDEg6QeBFqsHCMmOVZ9E1H0NEysam3OeeufPp4hya\nz3jmqxvG9udWNy31zooO8LOou1tL1OECCLBFaIVykIa/wz4yAtHKhBETJDqR\nAiTR\r\n=O7P3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGYMbEZfKbWzP2Ip3I1QhpwofG8gjIC2om1QACXzzOybAiEA+HT2aza0TF6fdh7mzLkdAydIB/aViMkY7Z+e5f537Bs="}]},"maintainers":[{"name":"matteozanoncello","email":"zanomate@gmail.com"}],"_npmUser":{"name":"matteozanoncello","email":"zanomate@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/responsive_2020.1.0_1595149165770_0.2536881689447441"},"_hasShrinkwrap":false}},"time":{"created":"2020-07-19T08:59:25.532Z","2020.1.0":"2020-07-19T08:59:25.878Z","modified":"2022-04-04T10:47:21.735Z"},"maintainers":[{"name":"matteozanoncello","email":"zanomate@gmail.com"}],"description":"Responsiveness for React Applications.","homepage":"https://github.com/4react/responsive#readme","repository":{"url":"git+https://github.com/4react/responsive.git"},"author":{"name":"Matteo Zanoncello"},"bugs":{"url":"https://github.com/4react/responsive/issues"},"license":"ISC","readme":"# @4react / responsive\r\n\r\nResponsiveness for React Applications.\r\n\r\n```\r\nnpm i @4react/responsive\r\n```\r\n\r\n## Usage\r\n\r\n### Define breakpoints\r\n\r\n```jsx\r\nimport { ResponsiveProvider } from '@4react/responsive'\r\n\r\nconst App = () => (\r\n  <ResponsiveProvider breakpoints={{\r\n    mobile: 0,\r\n    tablet: 768,\r\n    desktop: 992\r\n  }}>\r\n    ...\r\n  </ResponsiveProvider>\r\n)\r\n```\r\n\r\n### Create responsive values\r\n\r\n```jsx\r\nimport { useResponsive } from '@4react/responsive'\r\n\r\nconst Foo = () => {\r\n  const responsive = useResponsive()\r\n  const width = responsive(['100%', 720, 960])\r\n\r\n  return (\r\n    <div style={{ width }}>\r\n      ...\r\n    </div>\r\n  )\r\n}\r\n```\r\n\r\n### Render components conditionally\r\n\r\n```jsx\r\nimport { Responsive } from '@4react/responsive'\r\n\r\nconst App = () => (\r\n  <Container>\r\n    <Responsive condition={{ max: 'tablet' }}>\r\n      <MobileMenu />      \r\n    </Responsive>\r\n    <Responsive condition=\"desktop\">\r\n      <NavBar />\r\n    </Responsive>\r\n  </Container>\r\n)\r\n```\r\n\r\n## API\r\n\r\n##### Components\r\n- [ResponsiveProvider](#responsiveprovider-component)\r\n- [Responsive](#responsive-component)\r\n\r\n##### Hooks\r\n- [useResponsive](#useresponsive-hook)\r\n- [useResponsiveCondition](#useresponsivecondition-hook)\r\n- [useCurrentBreakpoint](#usecurrentbreakpoint-hook)\r\n- [useIsBreakpointDetected](#useisbreakpointdetected-hook)\r\n\r\n### ResponsiveProvider [Component]\r\n\r\nUse this component to provide responsiveness functionalities down to the application.\r\n\r\n| Props | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| breakpoints | object (***see [Breakpoints definition](#breakpoint-definition)***) | ***see [Default breakpoints](#default-breakpoints)*** | ***[optional]*** Custom breakpoints configuration. |\r\n\r\n#### Breakpoints definition\r\n\r\nBreakpoints can be configured with an object map with the following characteristics:\r\n- each key represent a custom breakpoint name\r\n- each value represents the `minimum width` for corresponding breakpoint.\r\n\r\n```\r\n{ tablet: 768, desktop: 992 }\r\n```\r\n\r\nThe example above specifies 2 values; the corresponding defined breakpoints are:\r\n- **tablet**: 768 pixels and above.\r\n- **desktop**: 992 pixels and above.\r\n\r\nNevertheless, a third breakpoint is implicitly defined, and will be automatically named \"**default**\":\r\n- **default**: 0 and above. Fallback value if no breakpoint is currently matching the screen resolution.\r\n\r\nAnyway, it's possible to define a custom name, even for the default breakpoint. Just define it with value 0.\r\n\r\n```\r\n{ mobile: 0, tablet: 768, desktop: 992 }\r\n```\r\n\r\nIn this case, breakpoints will be:\r\n- **mobile**: 0 pixels and above.\r\n- **tablet**: 768 pixels and above.\r\n- **desktop**: 992 pixels and above.\r\n\r\n**NOTE:** The order in which values are specified does not influence breakpoints order.\r\nValues will be sorted in ascending order.\r\n\r\n##### Default breakpoints\r\n\r\nIn case of no breakpoints' schema specified, the following values will be used:\r\n```\r\n{ xs: 480, sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1600 }\r\n```\r\n\r\n### Responsive [Component]\r\n\r\nUse this component to conditionally render parts of your application.\r\n\r\n```jsx\r\n// with children\r\n<Responsive condition={...}>\r\n  <Content />\r\n</Responsive>\r\n\r\n// with component prop\r\n<Responsive condition={...} component={Content} />\r\n\r\n// with render prop\r\n<Responsive condition={...} render={\r\n  (breakpoint) => <Content breakpoint={breakpoint}/>\r\n} />\r\n```\r\n\r\n| Props | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| condition | string &#124; array &#124; object (***see [Responsive condition](#responsive-condition)***) | - | Defines the render condition. |\r\n| component | React Component | - | ***[optional]*** Render the specified component. |\r\n| render | Render Function | - | ***[optional]*** Render function, receiving the current active breakpoint. |\r\n\r\n##### Responsive condition\r\n\r\nA responsive condition can be described in 3 ways:\r\n\r\nWith a `string` representing the name of a specific breakpoint.\r\n```jsx\r\n<Responsive condition=\"mobile\" ... />\r\n```\r\n\r\nWith an `array of string` representing a list of breakpoints names.\r\n```jsx\r\n<Responsive condition={['xs', 'xxl']} ... />\r\n```\r\n\r\nWith an `object` containing one or more of the following keys:\r\n- min:`string` representing the minimum breakpoint for which the condition is valid.\r\n- max:`string` representing the maximum breakpoint for which the condition is valid.\r\n```jsx\r\n<Responsive condition={{ min: 'lg' }} ... />\r\n<Responsive condition={{ min: 'sm', max: 'lg' }} ... />\r\n```\r\n\r\n### useResponsive [hook]\r\n\r\nCall this hook to obtain the *responsive* function, used for creating breakpoint-dependent values.\r\n```js\r\nconst responsive = useResponsive()\r\n```\r\n\r\n| Param | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| breakpoints | array | - | ***[optional]*** Select a subset of breakpoints for which the responsive function will work (see [Select a subset of breakpoints](#select-a-subset-of-breakpoints)). |\r\n\r\nThe responsive function takes a set of values as argument and returns the value to consider for the current valid breakpoint.\r\nLet's consider the same 3-breakpoints schema used in [Breakpoints definition](#breakpoint-definition) example.\r\n\r\nThe example below specifies a value for each defined breakpoint.\r\n```js\r\n// with default breakpoint\r\nconst width = responsive({ default: '100%', tablet: 720, desktop: 950 })\r\n\r\n// without default breakpoint\r\nconst width = responsive({ mobile: '100%', tablet: 720, desktop: 950 })\r\n```\r\n\r\nIt's also possible to use the array shorthand.\r\nValues will be associated to the breakpoint in the corresponding position, following the natural sorting.\r\n\r\n```js\r\nconst width = responsive(['100%', 720, 950])\r\n```\r\nIn the example above, the second value in the array (720) will refer to the second breakpoint (tablet).\r\n\r\n**NOTE:** The `responsive` function can also be called with a simple value (`string` or `number`).\r\nIn this case the value is simply returned without any additional logic.\r\n\r\nMany times you want to manage a responsive property without specifying values for each possible breakpoint\r\ne.g. a *visibility* property to set from *\"visible\"* to *\"hidden\"*  when breakpoint change from tablet to desktop.\r\nIn these cases, we can simply ignore non interesting breakpoints.\r\n\r\n```js\r\nconst visibility = responsive({ mobile: 'visible', desktop: 'hidden' })\r\n// is the same of\r\nconst visibility = responsive({ mobile: 'visible', tablet: 'visible', desktop: 'hidden' })\r\n```\r\nBoth the above lines creates the same responsive value.\r\nIn this case specifying a value for the *tablet* breakpoint is not necessary;\r\n`tablet` will automatically maintain the value declared for `mobile` breakpoint.\r\n\r\nIn general, a responsive value will be used for the specified breakpoint and for all the following, until another value will be found for a subsequent breakpoint.\r\n\r\nHere another example using the default configuration  see [Default Breakpoints](#default-breakpoints)).\r\n```js\r\nconst height = responsive({ default: 32, md: 40, xxl: 48 })\r\n```\r\nIn this case:\r\n- *default*, *xs* and *sm* will take both value 32.\r\n- *md*, *lg* and *xl* will all take value 40.\r\n- *xxl* will take value 48.\r\n\r\n**NOTE:** Using the array notation you are forced to declare a value for each breakpoint.\r\nSkipping a value will cause the breakpoint in the corresponding position to have value `undefined`.\r\nAnyway you can use this notation on a subset of breakpoints (See [Select a breakpoints subset](#select-a-breakpoints-subset))\r\n\r\n##### Select a breakpoints subset\r\n\r\nIf needed, we can use the useResponsive optional parameter to specify a desired subset of breakpoints;\r\nthis can be done listing their names:\r\n\r\n```jsx\r\nconst responsive = useResponsive(['default', 'md', 'xxl'])\r\n\r\nconst width = responsive([32, 40, 48])\r\n```\r\nIn the above example, the responsive function will take an array of 3 values, corresponding to the 3 breakpoints selected with the hook parameter.\r\n\r\n### useResponsiveCondition [hook]\r\n\r\nUse this hook to create boolean checks using the same condition logics of the Responsive component (See [Responsive Component](#responsive-component)).\r\n\r\n| Param | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| breakpoints | string &#124; array &#124; object (See [Responsive Component](#responsive-component)) | - | Specify the checker condition. |\r\n\r\n```js\r\n// single breakpoint\r\nconst isMobile = useResponsiveCondition('mobile')\r\n// list of breakpoints\r\nconst isMobile = useResponsiveCondition(['xs', 'sm', 'md'])\r\n// configuration objet\r\nconst isMobile = useResponsiveCondition({ max: 'md' })\r\n```\r\n\r\n### useCurrentBreakpoint [hook]\r\n\r\nUse this hook to obtain the actual valid breakpoint.\r\n\r\n```js\r\nconst current = useCurrentBreakpoint()\r\n```\r\n\r\n### useIsBreakpointDetected [hook]\r\n\r\nBreakpoint is detected at runtime.\r\nUse this hook to check if a breakpoint is still to be detected during the first application render.\r\n\r\n```js\r\nconst isBreakpointDetected = useIsBreakpointDetected()\r\n\r\nif (!isBreakpointDetected) {\r\n  render <Loader />\r\n}\r\n\r\nrender <App />\r\n```\r\n","readmeFilename":"README.md"}