{"id":20609489,"url":"https://github.com/jessemao/react-picker-mobile","last_synced_at":"2026-05-02T10:38:14.807Z","repository":{"id":57342456,"uuid":"82903629","full_name":"jessemao/react-picker-mobile","owner":"jessemao","description":"A picker component for mobile device, both 2D and 3D available","archived":false,"fork":false,"pushed_at":"2017-02-27T06:11:47.000Z","size":522,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-17T17:46:59.607Z","etag":null,"topics":["3d-picker","mobile","mobile-picker","picker","picker-component","react","react-component","react-picker","react-picker-mobile"],"latest_commit_sha":null,"homepage":"https://jessemao.github.io/react-picker-mobile/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jessemao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-23T08:27:32.000Z","updated_at":"2019-10-25T01:36:02.000Z","dependencies_parsed_at":"2022-09-16T02:50:23.857Z","dependency_job_id":null,"html_url":"https://github.com/jessemao/react-picker-mobile","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessemao%2Freact-picker-mobile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessemao%2Freact-picker-mobile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessemao%2Freact-picker-mobile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessemao%2Freact-picker-mobile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jessemao","download_url":"https://codeload.github.com/jessemao/react-picker-mobile/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242257118,"owners_count":20098103,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d-picker","mobile","mobile-picker","picker","picker-component","react","react-component","react-picker","react-picker-mobile"],"created_at":"2024-11-16T10:13:41.739Z","updated_at":"2026-05-02T10:38:14.766Z","avatar_url":"https://github.com/jessemao.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Picker Mobile\nReact Picker Mobile is a component very easy to use with no extra effort. It can be used in any project with great performance!\n\n# How to install\n```\nnpm install react-picker-mb --save\n```\n\n# How to use\n## ES6\n```\nimport Picker from 'react-picker-mb';\n```\n\n## CommonJS\n```\nvar Picker = require('react-picker-mb');\n```\n\n# Properties\n\n| Name             | Type     | Default  | Description                                                                                                                                |\n|------------------|----------|----------|--------------------------------------------------------------------------------------------------------------------------------------------|\n| itemHeight       | Number   | 36       | Height of each row in picker (px).                                                                                                         |\n| visibleItemCount | Number   | 5        | Count of visible items in picker.                                                                                                          |\n| showToolbar      | Boolean  | false    | If true, a customized toolbar would appear in picker.                                                                                      |\n| rotateEffect     | Boolean  | false    | If true, picker will be in 3D mode; otherwise, picker will be in 2D.                                                                       |\n| pickerSlots      | Array    | []       | Array of pickers is used in total. Each item of this array will implement an individual picker(**pickerSlot**).                                |\n| onChange         | Function | () =\u003e {} | This accepts a callback function for picker to output result. Picker result will be in format of array, for example, ['2015', '01', '02']. |\n\n### PickerSlot\n| Name           | Type    | Default  | Description                                                                                                                                                                                          |\n|----------------|---------|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| options        | Array   | []       | Array of each picker's options. item of array can be one of type: String, Number, Boolean, Object. If it's an object, property **dataKey** then is required so that picker knows what values to use. |\n| dataKey        | String  | \"\"       | Optional property, is required when options array includes objects. Use this key to get values of option object.                                                                                     |\n| defaultIndex   | Number  | 0        | Set default value of picker by index.                                                                                                                                                                |\n| divider        | Boolean | false    | If true, a divider column is created.                                                                                                                                                                |\n| dividerContent | String  | \"-\"      | If **divider** is true, **dividerContent** will be used for displaying the divider column. It can be rich HTML string.                                                                               |\n| className      | String  | \"\"       | Customized class for the picker column.                                                                                                                                                              |\n| flex           | Number  | 0        | Optional property. Picker columns apply flex layout. Bigger value will result in a larger column.                                                                                                    |\n| textAlign      | String  | 'center' | Can be 'left/center/right'. Text alignment of the picker column.                                                                                                                                     |\n\n# Getting Started\nTo play it yourself, you can clone this repo and run the example in your local space.\n\nOr you can play with the picker [**Online here**](https://jessemao.github.io/react-picker-mobile/)\n```\ngit clone https://github.com/jessemao/react-picker-mobile.git\ncd react-picker-mobile \u0026\u0026 cd example\nnpm install\nnpm start\n```\nThe code example as below:\n```\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Picker from 'react-picker-mb';\nimport './index.css';\n\nReactDOM.render(\u003cPicker\n    pickerSlots={[{\n      flex: 1,\n      options: [{\n        id: '0'\n      }, {\n        id: '1'\n      }, {\n        id: '2'\n      }, {\n        id: '3'\n      }, {\n        id: '4'\n      }],\n      defaultIndex: 2,\n      dataKey: 'id',\n      className: 'slot1',\n      textAlign: 'right',\n    }, {\n      divider: true,\n      dividerContent: '-',\n      className: 'slot2'\n    }, {\n      flex: 1,\n      options: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],\n      className: 'slot3',\n      textAlign: 'left'\n    }]\n  }\n  visibleItemCount={ 5 }\n  onChange={ (res) =\u003e console.log(res) }\n/ \u003e,\ndocument.getElementById('root')\n);\n```\n\n# License\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjessemao%2Freact-picker-mobile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjessemao%2Freact-picker-mobile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjessemao%2Freact-picker-mobile/lists"}