{"id":13621420,"url":"https://github.com/adcentury/react-mobile-picker","last_synced_at":"2025-05-14T18:02:42.603Z","repository":{"id":3454668,"uuid":"49556165","full_name":"adcentury/react-mobile-picker","owner":"adcentury","description":"An iOS like selector/picker component for web","archived":false,"fork":false,"pushed_at":"2025-04-30T23:05:42.000Z","size":2800,"stargazers_count":333,"open_issues_count":6,"forks_count":127,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-11T03:04:11.525Z","etag":null,"topics":["mobile","mobile-picker","mobile-ui","picker","react","react-component","react-mobile-picker","react-picker","react-ui"],"latest_commit_sha":null,"homepage":"http://adcentury.github.io/react-mobile-picker","language":"TypeScript","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/adcentury.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-01-13T07:05:26.000Z","updated_at":"2025-05-10T12:29:51.000Z","dependencies_parsed_at":"2024-01-25T04:48:01.306Z","dependency_job_id":"8447bf8c-6ff7-4024-84a4-470322c6ed0e","html_url":"https://github.com/adcentury/react-mobile-picker","commit_stats":{"total_commits":54,"total_committers":10,"mean_commits":5.4,"dds":0.2777777777777778,"last_synced_commit":"e15156ee7e7cbc08c3c2e4b66c5440313e944a00"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adcentury%2Freact-mobile-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adcentury%2Freact-mobile-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adcentury%2Freact-mobile-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adcentury%2Freact-mobile-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adcentury","download_url":"https://codeload.github.com/adcentury/react-mobile-picker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253701521,"owners_count":21949835,"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":["mobile","mobile-picker","mobile-ui","picker","react","react-component","react-mobile-picker","react-picker","react-ui"],"created_at":"2024-08-01T21:01:05.924Z","updated_at":"2025-05-14T18:02:37.585Z","avatar_url":"https://github.com/adcentury.png","language":"TypeScript","funding_links":[],"categories":["UI Components"],"sub_categories":["Form Components"],"readme":"# React Mobile Picker\n\n[![version](https://img.shields.io/npm/v/react-mobile-picker)](https://www.npmjs.org/package/react-mobile-picker)\n![language](https://img.shields.io/github/languages/top/adcentury/react-mobile-picker)\n[![npm download](https://img.shields.io/npm/dm/react-mobile-picker.svg?style=flat-square)](https://www.npmjs.org/package/react-mobile-picker)\n![npm bundle size](https://img.shields.io/bundlephobia/min/react-mobile-picker)\n![npm bundle size zip](https://img.shields.io/bundlephobia/minzip/react-mobile-picker)\n![license](https://img.shields.io/npm/l/react-mobile-picker)\n\nReact Mobile Picker is a super simple component like iOS picker for React. It's almost unstyled, so you can easily customize it as you like.\n\n\u003ckbd\u003e\u003cimg src=\"./examples/assets/screen-capture.gif\" alt=\"screen capture\" width=\"300\" /\u003e\u003c/kbd\u003e\n\n## Preview\n\n![qr](./examples/assets/qr.jpg)\n\nScan this Qr in you mobile.\n\nOr visit (in mobile or mobile simulator): [https://react-mobile-picker.vercel.app](https://react-mobile-picker.vercel.app)\n\n## Installation\n\n```bash\nnpm install react-mobile-picker\n```\nor\n```bash\nyarn add react-mobile-picker\n```\n\n## Basic usage\n\nBy design, React Mobile Picker is a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components), which means the selected items of the rendered element will always reflect the `value` prop. Every time you want to change the selected items, just modify the `value` prop.\n\n```jsx\nimport { useState } from 'react'\nimport Picker from 'react-mobile-picker'\n\nconst selections = {\n  title: ['Mr.', 'Mrs.', 'Ms.', 'Dr.'],\n  firstName: ['John', 'Micheal', 'Elizabeth'],\n  lastName: ['Lennon', 'Jackson', 'Jordan', 'Legend', 'Taylor']\n}\n\nfunction MyPicker() {\n  const [pickerValue, setPickerValue] = useState({\n    title: 'Mr.',\n    firstName: 'Micheal',\n    lastName: 'Jordan'\n  })\n\n  return (\n    \u003cPicker value={pickerValue} onChange={setPickerValue}\u003e\n      {Object.keys(selections).map(name =\u003e (\n        \u003cPicker.Column key={name} name={name}\u003e\n          {selections[name].map(option =\u003e (\n            \u003cPicker.Item key={option} value={option}\u003e\n              {option}\n            \u003c/Picker.Item\u003e\n          ))}\n        \u003c/Picker.Column\u003e\n      ))}\n    \u003c/Picker\u003e\n  )\n}\n```\n\n## Using render props\n\nEach `Picker.Item` component exposes a `selected` state that can be used to customize the appearance of the item. This is called the [render props](https://legacy.reactjs.org/docs/render-props.html) technique.\n\n```jsx\nimport { useState } from 'react'\nimport Picker from 'react-mobile-picker'\n\nfunction MyPicker() {\n  const [pickerValue, setPickerValue] = useState({\n    name1: 'item1',\n    /* ... */\n  })\n\n  return (\n    \u003cPicker value={pickerValue} onChange={setPickerValue}\u003e\n      \u003cPicker.Column name=\"name1\"\u003e\n        \u003cPicker.Item value=\"item1\"\u003e\n          {({ selected }) =\u003e (\n            /* Use the `selected` state to conditionally style the selected item */\n            \u003cdiv style={{ color: selected ? 'red' : 'black' }}\u003e\n              Item 1\n            \u003c/div\u003e\n          )}\n        \u003c/Picker.Item\u003e\n        {/* ... */}\n      \u003c/Picker.Column\u003e\n      {/* ... */}\n    \u003c/Picker\u003e\n  )\n}\n```\n\n## Support wheel scrolling\n\nReact Mobile Picker is designed to be used on mobile devices, but it can also support wheel scrolling on desktop browsers. To enable this feature, you can set the `wheelMode` prop to either `'natural'` or `'normal'`.\n\n```jsx\nimport { useState } from 'react'\nimport Picker from 'react-mobile-picker'\n\nfunction MyPicker() {\n  const [pickerValue, setPickerValue] = useState({\n    name1: 'item1',\n    /* ... */\n  })\n\n  return (\n    \u003cPicker value={pickerValue} onChange={setPickerValue} wheelMode=\"natural\"\u003e\n      {/* ... */}\n    \u003c/Picker\u003e\n  )\n}\n```\n\n## Component API\n\n### Picker\n\nthe main Picker container component.\n\n| Prop | Default | Description |\n| :---- | :------- | :----------- |\n| value | N/A | `{ [name: string]: string }`\u003cbr /\u003eSelected value pairs |\n| onChange | N/A | `(value: T, key: string) =\u003e void`\u003cbr /\u003eCallback function when the selected value changes |\n| height | 216 | `number`\u003cbr /\u003eHeight of the picker in `px` |\n| itemHeight | 36 | `number`\u003cbr /\u003eHeight of each item (that is each option) in `px` |\n| wheelMode | `'off'` | `'off' \\| 'natural' \\| 'normal'`\u003cbr /\u003eEnable wheel scrolling on desktop browsers |\n\n### Picker.Column\n\nThe wrapper component for each column.\n\n| Prop | Default | Description |\n| :---- | :------- | :----------- |\n| name | N/A | `string`\u003cbr /\u003eThe name should be one of the keys of the `value` in `Picker` component |\n\n### Picker.Item\n\nThe wrapper component for each selectable option.\n\n| Prop | Default | Description |\n| :---- | :------- | :----------- |\n| value | N/A | `string`\u003cbr /\u003eThe value of the current option |\n\n| Render Prop | Description |\n| :----------- | :----------- |\n| selected | `boolean`\u003cbr /\u003eWhether or not the current option is selected |\n\n## More examples\n\nYou can check out the [examples](./examples) folder for more code samples. Or run this project locally:\n\n```bash\ngit clone this repo\ncd react-mobile-picker\npnpm i\npnpm run dev\npoint your browser to http://localhost:5173\n```\n\n## Author\n\nAdcent Lei ([@adcentlei](https://twitter.com/adcentlei))\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadcentury%2Freact-mobile-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadcentury%2Freact-mobile-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadcentury%2Freact-mobile-picker/lists"}