{"_id":"@braden-m/react-select-async-paginate","_rev":"2-ec1c8a0de75a8bf328c0016794f8c962","name":"@braden-m/react-select-async-paginate","dist-tags":{"latest":"0.2.9"},"versions":{"0.2.8":{"name":"@braden-m/react-select-async-paginate","version":"0.2.8","description":"Wrapper above react-select that supports pagination on menu scroll","main":"lib/index.js","module":"es/index.js","repository":{"type":"git","url":"git+ssh://git@github.com/vtaits/react-select-async-paginate.git"},"author":{"name":"Vadim Taits"},"license":"MIT","scripts":{"build":"yarn build:cjs && yarn build:es","build:cjs":"cross-env BABEL_ENV=cjs babel src --out-dir lib --ignore \"src/**/__tests__\"","build:es":"cross-env BABEL_ENV=es babel src --out-dir es --ignore \"src/**/__tests__\"","lint":"eslint src --ext .js,.jsx","test:unit":"jest","test:unit:cov":"jest --coverage","test":"yarn lint && yarn test:unit","prepublish":"yarn build","validate":"yarn lint && yarn test:unit:cov && yarn build"},"peerDependencies":{"prop-types":"^15.0.0","react":"^15.0.0 || ^16.0.0","react-select":"^2.0.0"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.2.3","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","codecov.io":"^0.1.6","cross-env":"^5.2.0","enzyme":"^3.8.0","enzyme-adapter-react-16":"^1.7.1","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.2","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","prop-types":"^15.6.2","raf":"^3.4.0","react":"^16.7.0","react-dom":"^16.7.0","react-select":"^2.1.2","react-test-renderer":"^16.7.0"},"jest":{"collectCoverageFrom":["src/**/*.js","src/**/*.jsx","!src/**/__tests__/**/*.js","!src/**/__tests__/**/*.jsx"],"coverageReporters":["text","lcov","html"],"testPathIgnorePatterns":["/node_modules/","/examples/"],"setupFiles":["./setup-jest.js"]},"dependencies":{"@babel/runtime":"^7.2.0"},"gitHead":"128f7137c2d45259b514afaa2e4014beef10814f","bugs":{"url":"https://github.com/vtaits/react-select-async-paginate/issues"},"homepage":"https://github.com/vtaits/react-select-async-paginate#readme","_id":"@braden-m/react-select-async-paginate@0.2.8","_npmVersion":"6.4.1","_nodeVersion":"8.14.0","_npmUser":{"name":"braden-m","email":"braden@seermedical.com"},"dist":{"integrity":"sha512-t7q8LXxMHIFXbF1lJd3OyiLRhcWNIMmX+qp9TYniELLdFMd2mh7Bnif8P1LfUBT0XvxLmnaEa3Y3FVF5SYlNTw==","shasum":"bf9f63826dc363af7342644823e816bfa94e5789","tarball":"https://registry.npmjs.org/@braden-m/react-select-async-paginate/-/react-select-async-paginate-0.2.8.tgz","fileCount":18,"unpackedSize":49682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfa/XCRA9TVsSAnZWagAAdMcP/iSdCIxcytC+pmXHTjFa\ngLQ6LGpF2L2bdNp1RPUsyqH0APvQ51y0RiPAlS2teNAiyj6Wr56J/zhTiiQ1\ndxDTsLoPdoT9xXyq32xtaAnsUCNYRVQgt0ZCkLLIdBoWYQYmehaq9yJYs4JL\nxXJMqOOQAj048uiwmpqL9h5/xATa2u1uLGTswc8kXrtAuKCWm90F+K7b5ld8\nJO6+mDlm/qfWG3Q933XD6WdCt8VmkZ1BFsVnZTcnhUVZYiZRzEY/+IYoAr56\n9b+9r6+s6FgeQ97v12SXIQBKiSUCfvc4C0rOOSRCFVS90iROJ/FZPvDqo8vQ\nGpry/K8dXBgkoZd+uw7aAeJuo5EWD/c6wEKZJ0EXBMLK2CxogGqPDt9hu2v6\nsCV6y5WBJl7ZHGa/oR962Y0IDj4pRF+0nYW9LB/FAOtiaqKIVJMRss9qnhhV\n/3xuRLvXGfBlOdJXiSC30NX4A87+ZO29iQqC1jPnr8yZWGnCz6misrwmlFFQ\n4+zYbP8VVjeJqVaQcNW2HUwkwPsnZadMWasGBuYIoTX7wxnPWgIBURWUVKv3\nK7VG7x4nDSEuxPqiVyeN3GMCe5hb7xzODfdqGlIzSfGUuyp8Pb+EbcnmLxeQ\nttB385CBLVZOKgtzCT4V/OEm1kkjaSWE98r0r6gACNaNqVzGKwJvDVe8dryG\ndGEc\r\n=65sS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGMM6EzNx8SRTC28ehJHpzrfKjrQgJxlCP1A6YCFNRMnAiAqlZ8Qeifka7L3VFWqM0J5Zng+naNi0XevYHjG/S0ieQ=="}]},"maintainers":[{"name":"braden-m","email":"braden@seermedical.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-select-async-paginate_0.2.8_1551740886942_0.07817911735000549"},"_hasShrinkwrap":false},"0.2.9":{"name":"@braden-m/react-select-async-paginate","version":"0.2.9","description":"Wrapper above react-select that supports pagination on menu scroll","main":"lib/index.js","module":"es/index.js","repository":{"type":"git","url":"git+ssh://git@github.com/vtaits/react-select-async-paginate.git"},"author":{"name":"Vadim Taits"},"license":"MIT","scripts":{"build":"yarn build:cjs && yarn build:es","build:cjs":"cross-env BABEL_ENV=cjs babel src --out-dir lib --ignore \"src/**/__tests__\"","build:es":"cross-env BABEL_ENV=es babel src --out-dir es --ignore \"src/**/__tests__\"","lint":"eslint src --ext .js,.jsx","test:unit":"jest","test:unit:cov":"jest --coverage","test":"yarn lint && yarn test:unit","prepublish":"yarn build","validate":"yarn lint && yarn test:unit:cov && yarn build"},"peerDependencies":{"prop-types":"^15.0.0","react":"^15.0.0 || ^16.0.0","react-select":"^2.0.0"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.2.3","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","codecov.io":"^0.1.6","cross-env":"^5.2.0","enzyme":"^3.8.0","enzyme-adapter-react-16":"^1.7.1","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.2","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","prop-types":"^15.6.2","raf":"^3.4.0","react":"^16.7.0","react-dom":"^16.7.0","react-select":"^2.1.2","react-test-renderer":"^16.7.0"},"jest":{"collectCoverageFrom":["src/**/*.js","src/**/*.jsx","!src/**/__tests__/**/*.js","!src/**/__tests__/**/*.jsx"],"coverageReporters":["text","lcov","html"],"testPathIgnorePatterns":["/node_modules/","/examples/"],"setupFiles":["./setup-jest.js"]},"dependencies":{"@babel/runtime":"^7.2.0"},"gitHead":"16d67eaeb7785d6786859fc03a852a985b2d8fe1","bugs":{"url":"https://github.com/vtaits/react-select-async-paginate/issues"},"homepage":"https://github.com/vtaits/react-select-async-paginate#readme","_id":"@braden-m/react-select-async-paginate@0.2.9","_npmVersion":"6.4.1","_nodeVersion":"8.14.0","_npmUser":{"name":"braden-m","email":"braden@seermedical.com"},"dist":{"integrity":"sha512-4ldbf4O4nJmznkYvcwWMgqFBla4cJ5dVjSbMLPvTdXMopMzDAt87WypM+6q5nwxuYel1XW7+KJM766I32g9itA==","shasum":"c284306be42fd978fdceb31709660913134e6e3e","tarball":"https://registry.npmjs.org/@braden-m/react-select-async-paginate/-/react-select-async-paginate-0.2.9.tgz","fileCount":18,"unpackedSize":51652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchzj1CRA9TVsSAnZWagAAC2EP/iJPGuSWSIos0UpMxGIZ\nGR9lrxOr7+Fa8MFBWRtYOVLDkPW05j+06+9edZ31tMCtyzt0UbvPWrNN04tk\nKvgbL7GyPnBlpWrrSAdPW/tKsMc5T0gjhrHbsIx6iSL28fp71O86wZM78ynt\njstmf8h192pjSqKBstLFOaUvzvCYRXBs0ee2ChMPMdxNWEsxcbjBpKe/ZRt6\nT8mHmxLx6k7nOGGCr0eEjHRZMZUXKmerdyTrJV+UoVGHyiG5BPGhT+o42xIY\ngQkhFysXkt6lWbuvzIqc0Oxy/dx9Qwxo0+jOq7hhpQ0jbc9RaBlzugPecrOA\nl0r4hog6l3y+UEVlbzvr35boTpA2wap3grfTxwVQb3tP9UujjoOejGXL9p4S\nj4FWF/JMqGzrPkYbOauqt8FWRFzXVb3RE0vmsEgqiD5IP+g/rR18Iwb83DrK\nbXPP4fA33p9owZ90okc454PDKdbav+qHqe7dBdcf4qhEVEXss7VBEqR+RH9y\n0oLLSKmYj9kGWlaVsUMKHSpKpSYsJwM0GyjGRd1BNw+0n8ey3GhDbDZjkm9g\nbx7Z5BBN5wJjTiL6+rC7Ob5idmzLJ5syOjERNWkFJhmPgQBgOPdHAdjK2/4C\nsbPnpKbfXfMWZBaSNU+xw2YajaO0OmPGrwh1FmB57GPgT1wFGwUPoETbrGQf\nOEfx\r\n=srtT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2+wpx7rSrtUtNeZvWNdOMeyx4uUK3Y4oI0WM/ySUjPAIgaW3wuGPGHGzP8o0QdVGfROU9CZfB42Mxs9pDSqKJlzg="}]},"maintainers":[{"name":"braden-m","email":"braden@seermedical.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-select-async-paginate_0.2.9_1552365812948_0.20927264614300745"},"_hasShrinkwrap":false}},"time":{"created":"2019-03-04T23:08:06.761Z","0.2.8":"2019-03-04T23:08:07.172Z","modified":"2022-04-04T20:19:54.099Z","0.2.9":"2019-03-12T04:43:33.055Z"},"maintainers":[{"name":"braden-m","email":"braden@seermedical.com"}],"description":"Wrapper above react-select that supports pagination on menu scroll","homepage":"https://github.com/vtaits/react-select-async-paginate#readme","repository":{"type":"git","url":"git+ssh://git@github.com/vtaits/react-select-async-paginate.git"},"author":{"name":"Vadim Taits"},"bugs":{"url":"https://github.com/vtaits/react-select-async-paginate/issues"},"license":"MIT","readme":"[![NPM](https://img.shields.io/npm/v/react-select-async-paginate.svg)](https://www.npmjs.com/package/react-select-async-paginate)\n[![Build Status](https://img.shields.io/travis/vtaits/react-select-async-paginate.svg?style=flat)](https://travis-ci.org/vtaits/react-select-async-paginate)\n[![codecov.io](https://codecov.io/gh/vtaits/react-select-async-paginate/branch/master/graph/badge.svg)](https://codecov.io/gh/vtaits/react-select-async-paginate)\n\n# react-select-async-paginate\n\nWrapper above `react-select` that supports pagination on menu scroll.\n\n## Sandbox examples\n\n- [Simple](https://codesandbox.io/s/o75rno2w65)\n- [Multi](https://codesandbox.io/s/2323yrlo9r)\n- [Initial options](https://codesandbox.io/s/q111nqw9j)\n- [Debounce](https://codesandbox.io/s/5y2xq39v5k)\n- [Request by page number](https://codesandbox.io/s/10r1k12vk7)\n- [Customization check of the need of load options](https://codesandbox.io/s/kokz6j65zv)\n- [Grouped options](https://codesandbox.io/s/oxv62x8j4y)\n- [Custom select base](https://codesandbox.io/s/l2pjrv0ryl)\n\n## Versions\n\n| react-select | react-select-async-paginate |\n|--------------|-----------------------------|\n| 2.x | 0.2.x |\n| 1.x | 0.1.x |\n\n## Installation\n\n```\nnpm install react-select react-select-async-paginate\n```\n\nor\n\n```\nyarn add react-select react-select-async-paginate\n```\n\n## Usage\n\n`AsyncPaginate` is an alternative of `Async` but supports loading page by page. It is wrapper above default `react-select` thus it accepts all props of default `Select` except `isLoading`. And there are some new props:\n\n### loadOptions\n\nRequired. Async function that take next arguments:\n\n1. Current value of search input.\n2. Loaded options for current search.\n3. Collected additional data e.g. current page number etc. For first load it is `additional` from props, for next is `additional` from previous response for current search. `null` by default.\n\nIt should return next object:\n\n```\n{\n  options: Array,\n  hasMore: boolean,\n  additional?: any,\n}\n```\n\nIt similar to `loadOptions` from `Select.Async` but there is some differences:\n\n1. Loaded options as 2nd argument.\n2. Additional data as 3nd argument.\n3. Not supports callback.\n4. Should return `hasMore` for detect end of options list for current search.\n\n### debounceTimeout\n\nNot required. Number. Debounce timeout for `loadOptions` calls. `0` by default.\n\n### additional\n\nNot required. Default `additional` for first request for every search.\n\n### shouldLoadMore\n\nNot required. Function. By default new options will load only after scroll menu to bottom. Arguments:\n\n- scrollHeight\n- clientHeight\n- scrollTop\n\nShould return boolean.\n\n### reduceOptions\n\nNot required. Function. By default new loaded options are concat with previous. Arguments:\n\n- previous options\n- loaded options\n- next additional\n\nShould return new options.\n\n### cacheUniq\n\nNot required. Can take any value. When this prop changed, `AsyncPaginate` cleans all cached options.\n\n### selectRef\n\nRef for take `react-select` instance.\n\n## SelectComponent\n\nNot required. React component that will be used instead of `SelectBase` from `react-select`.\n\n## Example\n\n### offset way\n\n```\nimport AsyncPaginate from 'react-select-async-paginate';\n\n...\n\n/*\n * assuming the API returns something like this:\n *   const json = {\n *     results: [\n *       {\n *         value: 1,\n *         label: 'Audi',\n *       },\n *       {\n *         value: 2,\n *         label: 'Mercedes',\n *       },\n *       {\n *         value: 3,\n *         label: 'BMW',\n *       },\n *     ],\n *     has_more: true,\n *   };\n */\n\nasync function loadOptions(search, loadedOptions) {\n  const response = await fetch(`/awesome-api-url/?search=${search}&offset=${loadedOptions.length}`);\n  const responseJSON = await response.json();\n\n  return {\n    options: responseJSON.results,\n    hasMore: responseJSON.has_more,\n  };\n}\n\n<AsyncPaginate\n  value={value}\n  loadOptions={loadOptions}\n  onChange={setValue}\n/>\n```\n\n### page way\n\n```\nimport AsyncPaginate from 'react-select-async-paginate';\n\n...\n\nasync function loadOptions(search, loadedOptions, { page }) {\n  const response = await fetch(`/awesome-api-url/?search=${search}&page=${page}`);\n  const responseJSON = await response.json();\n\n  return {\n    options: responseJSON.results,\n    hasMore: responseJSON.has_more,\n    additional: {\n      page: page + 1,\n    },\n  };\n}\n\n<AsyncPaginate\n  value={value}\n  loadOptions={loadOptions}\n  onChange={setValue}\n  additional={{\n    page: 1,\n  }}\n/>\n```\n\n## Grouped options\n\nYou can use `reduceGroupedOptions` util to group options by `label` key.\n\n```\nimport AsyncPaginate, { reduceGroupedOptions } from 'react-select-async-paginate';\n\n/*\n * assuming the API returns something like this:\n *   const json = {\n *     options: [\n *       label: 'Cars',\n *       options: [\n *         {\n *           value: 1,\n *           label: 'Audi',\n *         },\n *         {\n *           value: 2,\n *           label: 'Mercedes',\n *         },\n *         {\n *           value: 3,\n *           label: 'BMW',\n *         },\n *       ]\n *     ],\n *     hasMore: true,\n *   };\n */\n\n...\n\n<AsyncPaginate\n  {...otherProps}\n  reduceOptions={reduceGroupedOptions}\n/>\n```\n\n## Replacing Components\n\nUsage of replacing components is similar with `react-select`, but there is one difference. If you redefine `MenuList` you should wrap it with `wrapMenuList` for workaround of some internal bugs of `react-select`.\n\n```\nimport AsyncPaginate, { wrapMenuList } from 'react-select-async-paginate';\n\n...\n\nconst MenuList = wrapMenuList(CustomMenuList);\n\n<AsyncPaginate\n  {...otherProps}\n  components={{\n    ...otherComponents,\n    MenuList,\n  }}\n/>\n```\n","readmeFilename":"README.md"}