{"_id":"@byhealth/react-mobile-picker","_rev":"11-8d2e441ccc342c4d969ef2de8a74f3bf","name":"@byhealth/react-mobile-picker","dist-tags":{"latest":"0.3.1"},"versions":{"0.2.0":{"name":"@byhealth/react-mobile-picker","version":"0.2.0","keywords":["react","react mobile picker","mobile picker","picker","react-component","react components","react ui","mobile ui"],"license":"MIT","_id":"@byhealth/react-mobile-picker@0.2.0","maintainers":[{"name":"byhealth-fed","email":"pengxp@by-health.com"}],"contributors":[{"name":"pengxp"},{"name":"Lei Lei","email":"adcentury100@gmail.com"}],"homepage":"https://github.com/by-healthfed/react-mobile-picker#readme","bugs":{"url":"https://github.com/by-healthfed/react-mobile-picker/issues"},"dist":{"shasum":"2fcaf8b8820e0617ea01376a3140725d83b6e8eb","tarball":"https://registry.npmjs.org/@byhealth/react-mobile-picker/-/react-mobile-picker-0.2.0.tgz","integrity":"sha512-Txr0JQGTcqbHlNKZbEXE+tD+fjZpVrdwB25KmRVFYKrGg31tST6mbwabxjZftb1M5Zm4mKkPS/1RcSvg90RZ7Q==","signatures":[{"sig":"MEUCIFcxMdMv7ra4Wtc7zzNtAtK8KWG9jT8uUjW6pZjQESZAAiEAopj7QBJEzfgaBgqRzzF57feOidpW0omgHrQWzO1yhtg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/react-mobile-picker.js","_from":".","files":["LICENCE","README.md","src","lib"],"_shasum":"2fcaf8b8820e0617ea01376a3140725d83b6e8eb","gitHead":"7d0b8b81fecfb42f7f713368d5b6834f100d687a","scripts":{"lint":"eslint src","build":"npm run clean && npm run lint && cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack.build.js","clean":"rimraf lib","start":"node examples/server.js","build-examples":"rimraf examples/dist && eslint examples && cross-env NODE_ENV=production webpack --progress --hide-modules --config examples/webpack.build.js"},"_npmUser":{"name":"byhealth-fed","email":"pengxp@by-health.com"},"repository":{"url":"git+https://github.com/by-healthfed/react-mobile-picker.git","type":"git"},"_npmVersion":"4.1.2","description":"An iOS like select box component for React","directories":{},"_nodeVersion":"7.7.3","devDependencies":{"less":"^2.5.3","react":"^0.14.8","eslint":"^1.10.3","rimraf":"^2.4.4","express":"^4.13.3","webpack":"^1.12.9","cross-env":"^4.0.0","react-dom":"^0.14.8","babel-core":"^6.3.17","css-loader":"^0.23.0","less-loader":"^2.2.2","babel-eslint":"^4.1.6","babel-loader":"^6.2.0","redbox-react":"^1.2.0","style-loader":"^0.13.0","babel-preset-react":"^6.3.13","autoprefixer-loader":"^3.1.0","babel-preset-es2015":"^6.3.13","eslint-plugin-babel":"^3.0.0","eslint-plugin-react":"^3.11.3","react-transform-hmr":"^1.0.1","babel-preset-stage-0":"^6.3.13","webpack-dev-middleware":"^1.4.0","webpack-hot-middleware":"^2.6.0","babel-plugin-react-transform":"^2.0.0-beta1","react-transform-catch-errors":"^1.0.0"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0","react-dom":"^0.14.0 || ^15.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-mobile-picker-0.2.0.tgz_1491981287616_0.08427913370542228","host":"packages-12-west.internal.npmjs.com"}},"0.2.1":{"name":"@byhealth/react-mobile-picker","version":"0.2.1","keywords":["react","react mobile picker","mobile picker","picker","react-component","react components","react ui","mobile ui"],"license":"MIT","_id":"@byhealth/react-mobile-picker@0.2.1","maintainers":[{"name":"byhealth-fed","email":"pengxp@by-health.com"}],"contributors":[{"name":"pengxp"},{"name":"Lei Lei","email":"adcentury100@gmail.com"}],"homepage":"https://github.com/by-healthFED/react-mobile-picker#readme","bugs":{"url":"https://github.com/by-healthFED/react-mobile-picker/issues"},"dist":{"shasum":"f0ac42eca9311ed1621450e71d3844416b36ae00","tarball":"https://registry.npmjs.org/@byhealth/react-mobile-picker/-/react-mobile-picker-0.2.1.tgz","integrity":"sha512-s8P30jZhpVCX1dSPJFeLP2zVou56itmrNP6gdead8JG0KCUW6lZBYwKfeQI8RJ1bwvmZ5ku5HQfoKM/lthGM1Q==","signatures":[{"sig":"MEYCIQDR/qE4UAi0JvVHpl3SQOzxnz9RSJdE43ExHtxnnHGkfwIhALjZ0ZHyshmBBGaL2TGCNzcmFkzt3ovN8ON2QNNsTpPk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/react-mobile-picker.js","files":["LICENCE","README.md","src","lib"],"gitHead":"66bf0205ff1c68046856bc3df5fdf70dbaccd396","scripts":{"lint":"eslint src","build":"npm run clean && npm run lint && cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack.build.js","clean":"rimraf lib","start":"node examples/server.js","build-examples":"rimraf examples/dist && eslint examples && cross-env NODE_ENV=production webpack --progress --hide-modules --config examples/webpack.build.js"},"_npmUser":{"name":"byhealth-fed","email":"pengxp@by-health.com"},"repository":{"url":"git+https://github.com/by-healthFED/react-mobile-picker.git","type":"git"},"_npmVersion":"5.3.0","description":"An iOS like select box component for React","directories":{},"_nodeVersion":"8.6.0","devDependencies":{"less":"^2.5.3","react":"^0.14.8","eslint":"^1.10.3","rimraf":"^2.4.4","express":"^4.13.3","webpack":"^1.12.9","cross-env":"^4.0.0","react-dom":"^0.14.8","babel-core":"^6.3.17","css-loader":"^0.23.0","less-loader":"^2.2.2","babel-eslint":"^4.1.6","babel-loader":"^6.2.0","redbox-react":"^1.2.0","style-loader":"^0.13.0","babel-preset-react":"^6.3.13","autoprefixer-loader":"^3.1.0","babel-preset-es2015":"^6.3.13","eslint-plugin-babel":"^3.0.0","eslint-plugin-react":"^3.11.3","react-transform-hmr":"^1.0.1","babel-preset-stage-0":"^6.3.13","webpack-dev-middleware":"^1.4.0","webpack-hot-middleware":"^2.6.0","babel-plugin-react-transform":"^2.0.0-beta1","react-transform-catch-errors":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-mobile-picker-0.2.1.tgz_1508309699866_0.7292225093115121","host":"s3://npm-registry-packages"}},"0.2.2":{"name":"@byhealth/react-mobile-picker","version":"0.2.2","keywords":["react","react mobile picker","mobile picker","picker","react-component","react components","react ui","mobile ui"],"license":"MIT","_id":"@byhealth/react-mobile-picker@0.2.2","maintainers":[{"name":"byhealth-fed","email":"pengxp@by-health.com"}],"contributors":[{"name":"pengxp"},{"name":"Lei Lei","email":"adcentury100@gmail.com"}],"homepage":"https://github.com/by-healthFED/react-mobile-picker#readme","bugs":{"url":"https://github.com/by-healthFED/react-mobile-picker/issues"},"dist":{"shasum":"453271aef0da0a654098140723dabf4d9bd2f0c4","tarball":"https://registry.npmjs.org/@byhealth/react-mobile-picker/-/react-mobile-picker-0.2.2.tgz","integrity":"sha512-H90zSm8K9Aw9P7LONn4zqHxjhfF+l7fUqTYYyMA9nccuDn5nNKtfH11cY9zsp0/Hkc9t6SUi/Oyd1TLlLIy7Yg==","signatures":[{"sig":"MEQCIDH9KRv4KxFZL4z4t8v3DWhaNqF3fqsKboXd5D3PPfWxAiApu3p3fayExt665nzmYIeR5EglcKTielQ0+SoFWRtSdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/react-mobile-picker.js","files":["LICENCE","README.md","src","lib"],"gitHead":"8acc9c1a014fa6be02d3e7a88e7c4ade577f978f","scripts":{"lint":"eslint src","build":"npm run clean && npm run lint && cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack.build.js","clean":"rimraf lib","start":"node examples/server.js","build-examples":"rimraf examples/dist && eslint examples && cross-env NODE_ENV=production webpack --progress --hide-modules --config examples/webpack.build.js"},"_npmUser":{"name":"byhealth-fed","email":"pengxp@by-health.com"},"repository":{"url":"git+https://github.com/by-healthFED/react-mobile-picker.git","type":"git"},"_npmVersion":"5.3.0","description":"An iOS like select box component for React","directories":{},"_nodeVersion":"8.6.0","devDependencies":{"less":"^2.5.3","react":"^0.14.8","eslint":"^1.10.3","rimraf":"^2.4.4","express":"^4.13.3","webpack":"^1.12.9","cross-env":"^4.0.0","react-dom":"^0.14.8","babel-core":"^6.3.17","css-loader":"^0.23.0","prop-types":"^15.6.0","less-loader":"^2.2.2","babel-eslint":"^4.1.6","babel-loader":"^6.2.0","redbox-react":"^1.2.0","style-loader":"^0.13.0","babel-preset-react":"^6.3.13","autoprefixer-loader":"^3.1.0","babel-preset-es2015":"^6.3.13","eslint-plugin-babel":"^3.0.0","eslint-plugin-react":"^3.11.3","react-transform-hmr":"^1.0.1","babel-preset-stage-0":"^6.3.13","webpack-dev-middleware":"^1.4.0","webpack-hot-middleware":"^2.6.0","babel-plugin-react-transform":"^2.0.0-beta1","react-transform-catch-errors":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-mobile-picker-0.2.2.tgz_1508309931595_0.6605176131706685","host":"s3://npm-registry-packages"}},"0.3.0":{"name":"@byhealth/react-mobile-picker","version":"0.3.0","keywords":["react","react mobile picker","mobile picker","picker","react-component","react components","react ui","mobile ui"],"license":"MIT","_id":"@byhealth/react-mobile-picker@0.3.0","maintainers":[{"name":"byhealth-fed","email":"pengxp@by-health.com"}],"contributors":[{"name":"pengxp"},{"name":"Lei Lei","email":"adcentury100@gmail.com"}],"homepage":"https://github.com/by-healthFED/react-mobile-picker#readme","bugs":{"url":"https://github.com/by-healthFED/react-mobile-picker/issues"},"dist":{"shasum":"50536d48d76b18bac21b18b7e88a07efd3008cd2","tarball":"https://registry.npmjs.org/@byhealth/react-mobile-picker/-/react-mobile-picker-0.3.0.tgz","integrity":"sha512-fgQrW8D2eDVeWhalm2nmQWjg0h5SpH/b5swNCxUsQP/tHIXleF+IC5sFRyg5R5kiC2zZ3L5+5vFqz2G31yqwMQ==","signatures":[{"sig":"MEUCIQDW57o2ZeyBkcImg4ZcTkYv4kov0DcG+x1XKv0oMu6emwIgVEg1WuudTOg6zpgvdX27Leeb6gWNrNr0j8NClI+uEOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/react-mobile-picker.js","files":["LICENCE","README.md","src","lib"],"gitHead":"40e14a489d9e0669c9a358abf132a2c4baf53289","scripts":{"lint":"eslint src","build":"npm run clean && npm run lint && cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack.build.js","clean":"rimraf lib","start":"node examples/server.js","build-examples":"rimraf examples/dist && eslint examples && cross-env NODE_ENV=production webpack --progress --hide-modules --config examples/webpack.build.js"},"_npmUser":{"name":"byhealth-fed","email":"pengxp@by-health.com"},"repository":{"url":"git+https://github.com/by-healthFED/react-mobile-picker.git","type":"git"},"_npmVersion":"5.5.1","description":"An iOS like select box component for React","directories":{},"_nodeVersion":"8.9.0","devDependencies":{"less":"^2.5.3","react":"^0.14.8","eslint":"^1.10.3","rimraf":"^2.4.4","express":"^4.13.3","webpack":"^1.12.9","cross-env":"^4.0.0","react-dom":"^0.14.8","babel-core":"^6.3.17","css-loader":"^0.23.0","prop-types":"^15.6.0","less-loader":"^2.2.2","babel-eslint":"^4.1.6","babel-loader":"^6.2.0","redbox-react":"^1.2.0","style-loader":"^0.13.0","babel-preset-react":"^6.3.13","autoprefixer-loader":"^3.1.0","babel-preset-es2015":"^6.3.13","eslint-plugin-babel":"^3.0.0","eslint-plugin-react":"^3.11.3","react-transform-hmr":"^1.0.1","babel-preset-stage-0":"^6.3.13","webpack-dev-middleware":"^1.4.0","webpack-hot-middleware":"^2.6.0","babel-plugin-react-transform":"^2.0.0-beta1","react-transform-catch-errors":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-mobile-picker-0.3.0.tgz_1514172913312_0.6698636603541672","host":"s3://npm-registry-packages"}},"0.3.1":{"name":"@byhealth/react-mobile-picker","version":"0.3.1","keywords":["react","react mobile picker","mobile picker","picker","react-component","react components","react ui","mobile ui"],"license":"MIT","_id":"@byhealth/react-mobile-picker@0.3.1","maintainers":[{"name":"byhealth-fed","email":"pengxp@by-health.com"},{"name":"hambutgertwo","email":"276636806@qq.com"}],"contributors":[{"name":"pengxp"},{"name":"Lei Lei","email":"adcentury100@gmail.com"}],"homepage":"https://github.com/by-healthFED/react-mobile-picker#readme","bugs":{"url":"https://github.com/by-healthFED/react-mobile-picker/issues"},"dist":{"shasum":"60a5f22d1440235adfc43489f0c3678779af8518","tarball":"https://registry.npmjs.org/@byhealth/react-mobile-picker/-/react-mobile-picker-0.3.1.tgz","fileCount":9,"integrity":"sha512-ZlSStmMUJ3nwyNToaJL+UHtwCv9UaYWH33Df+6IxUx7cmDdOCHFc/aIGHQ2EBOo6fCEGslC+4D34ZmlZRGTTnA==","signatures":[{"sig":"MEUCIQC2YSL80Qv1xG2JaJM9UoDlHN6D9CQk4jWk4Z3taH3AhwIgGzLXfMvnz4749DIIp3jS5BGnCN7XuS54nvb8jTnu76I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkGqcCRA9TVsSAnZWagAApnkP/jcm/51vhTimCDscpSwO\nncYqYV+dNAEgpD+JinJUQGCd209kV6z6NhIySLAkJRxM22hTXPc1Cj3MJzWT\nJjoKJymTDS2/cp/IsdixhnQtmB3XBuzhxV7NpswKNuifWG8kR+uxFl6o+oOm\nWFVn7/lfdDQvR6Qcmhaoct6KwGbx0qMVB4Wd1oN043B33ZfdmLo8dzExA7b0\newGL+R7apMw7XvxKLgpYySLSdyzlI5hUzzM9TGk6gJwbkBw0WI0+E9zvXKM2\nseDMpuHC0g6kIktQTePFQnQesBeWn8lW2nUPmBacIGqbiIFtlqU6/1VmT06r\njSBMiHUyi6Heurd9SDrRLQ9ZI8dP7DINKfxESi8AUWJjtkClMVmIj2khmkyZ\n549E+r+hnw71NswERHdakeMt6WU6A814txkpRYJUqaOvUPmcjskzVDZOmzWk\n8y3bz3+6qwfHPQzMZgMHao7/Kg44zNnHT3W5yyXXj0RLChYn2elrUv+k/x8l\nFW3YOGG0VPTGPLQwqdKEEz91kJtZM57ZHWtJhUuI02Gj6i4dDJfkuCCftLVO\nskP75Xyc6bnKmDD+6z1JVn/FuregIs39jgqpyoebbQOlQMUsxq87eRHLXqTH\neoKPTvI4aL4r1c11u6bAcMomou2ivU+PgjVL5VHu1VmRhBfarRwamG+WaTlj\nEW3q\r\n=8si8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/react-mobile-picker.js","gitHead":"c0cf78977675ee0ebc2fe503e392b169c6650f92","scripts":{"lint":"eslint src","build":"npm run clean && npm run lint && cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack.build.js","clean":"rimraf lib","start":"node examples/server.js","build-examples":"rimraf examples/dist && eslint examples && cross-env NODE_ENV=production webpack --progress --hide-modules --config examples/webpack.build.js"},"_npmUser":{"name":"byhealth-fed","email":"pengxp@by-health.com"},"repository":{"url":"git+https://github.com/by-healthFED/react-mobile-picker.git","type":"git"},"_npmVersion":"6.10.3","description":"An iOS like select box component for React","directories":{},"_nodeVersion":"12.8.0","_hasShrinkwrap":false,"devDependencies":{"less":"^2.5.3","react":"^0.14.8","eslint":"^1.10.3","rimraf":"^2.4.4","express":"^4.13.3","webpack":"^1.12.9","cross-env":"^4.0.0","react-dom":"^0.14.8","babel-core":"^6.3.17","css-loader":"^0.23.0","prop-types":"^15.6.0","less-loader":"^2.2.2","babel-eslint":"^4.1.6","babel-loader":"^6.2.0","redbox-react":"^1.2.0","style-loader":"^0.13.0","babel-preset-react":"^6.3.13","autoprefixer-loader":"^3.1.0","babel-preset-es2015":"^6.3.13","eslint-plugin-babel":"^3.0.0","eslint-plugin-react":"^3.11.3","react-transform-hmr":"^1.0.1","babel-preset-stage-0":"^6.3.13","webpack-dev-middleware":"^1.4.0","webpack-hot-middleware":"^2.6.0","babel-plugin-react-transform":"^2.0.0-beta1","react-transform-catch-errors":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-mobile-picker_0.3.1_1569745563886_0.3987202707133526","host":"s3://npm-registry-packages"}}},"time":{"created":"2017-04-12T07:14:47.887Z","modified":"2024-10-16T10:06:17.220Z","0.2.0":"2017-04-12T07:14:47.887Z","0.2.1":"2017-10-18T06:54:59.995Z","0.2.2":"2017-10-18T06:58:51.736Z","0.3.0":"2017-12-25T03:35:13.450Z","0.3.1":"2019-09-29T08:26:04.090Z"},"bugs":{"url":"https://github.com/by-healthFED/react-mobile-picker/issues"},"license":"MIT","homepage":"https://github.com/by-healthFED/react-mobile-picker#readme","keywords":["react","react mobile picker","mobile picker","picker","react-component","react components","react ui","mobile ui"],"repository":{"url":"git+https://github.com/by-healthFED/react-mobile-picker.git","type":"git"},"description":"An iOS like select box component for React","contributors":[{"name":"pengxp"},{"name":"Lei Lei","email":"adcentury100@gmail.com"}],"maintainers":[{"email":"puxiaping@gmail.com","name":"byhealth-fed"}],"readme":"# React Mobile Picker\n\nReact Mobile Picker is a super simple component with no restriction, which means you can use it in any way you want.\n\n![screen-capture](./examples/screen-capture.gif)\n\n## Preview\n\n![qr](./examples/qr.png)\n\nScan this Qr in you mobile.\n\nOr visit (in mobile or mobile simulator): [http://adcentury.github.io/react-mobile-picker](http://adcentury.github.io/react-mobile-picker)\n\n## Install\n\n```\nnpm install react-mobile-picker --save\n```\n\n## Usage\n\n### ES6\n\n```javascript\nimport Picker from 'react-mobile-picker';\n```\n\n### CommonJS\n\n```javascript\nvar Picker = require('react-mobile-picker');\n```\n\n## Props\n\n| Property name | Type | Default | Description |\n| ------------- | ---- | ------- | ----------- |\n| optionGroups | Object | N/A | Key-value pairs as `{name1: options1, name2: options2}`. `options` is an array or Key-value pairs as `{text: 'display', value: selectedValue}` of all options. |\n| valueGroups | Object | N/A | Selected value pairs as `{name1: value1, name2: value2}`. |\n| onChange(name, value) | Function | N/A | Callback called when user pick a new value. |\n| itemHeight | Number | 36 | Height of each item (that is each option). In `px`. |\n| height | Number | 216 | Height of the picker. In `px`. |\n\n## Getting Started\n\nBy design, React Mobile Picker is a [Controlled Component](https://facebook.github.io/react/docs/forms.html#controlled-components), which means the selected value of the rendered element will always reflect the `valueGroups`. Every time you want to change the selected item, just modify `valueGroups` values.\n\nHere is an example of how to integrate React Mobile Picker:\n\n```javascript\nimport React, {Component} from 'react';\nimport Picker from 'react-mobile-picker';\n\nclass App extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      valueGroups: {\n        title: 'Mr.',\n        firstName: 'Micheal',\n        secondName: 'Jordan'\n      }, \n      optionGroups: {\n        title: ['Mr.', 'Mrs.', 'Ms.', 'Dr.'],\n        firstName: ['John', 'Micheal', 'Elizabeth'],\n        secondName: [\n          { text: 'Lennon', value: 'Lennon'}, \n          { text: 'Jackson', value: 'Jackson'}, \n          { text: 'Jordan', value: 'Jordan'}, \n          { text: 'Legend', value: 'Legend'}, \n          { text: 'Taylor', value: 'Taylor'}\n        ]\n      }\n    };\n  }\n\n  // Update the value in response to user picking event\n  handleChange = (name, value) => {\n    this.setState(({valueGroups}) => ({\n      valueGroups: {\n        ...valueGroups,\n        [name]: value\n      }\n    }));\n  };\n\n  render() {\n    const {optionGroups, valueGroups} = this.state;\n\n    return (\n      <Picker\n        optionGroups={optionGroups}\n        valueGroups={valueGroups}\n        onChange={this.handleChange} />\n    );\n  }\n}\n```\n\n## More Examples\n\n```\ngit clone this repo\nnpm install\nnpm start\npoint your browser to http://localhost:8080\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md"}