{"id":20447623,"url":"https://github.com/acrool/acrool-react-picker","last_synced_at":"2025-08-19T19:21:40.414Z","repository":{"id":251717527,"uuid":"838187335","full_name":"acrool/acrool-react-picker","owner":"acrool","description":"This is a react method to quickly combine buttons/input with Picker","archived":false,"fork":false,"pushed_at":"2025-05-12T13:39:01.000Z","size":2353,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-30T14:08:30.936Z","etag":null,"topics":["react-picker","reactjs"],"latest_commit_sha":null,"homepage":"https://acrool-react-picker.pages.dev/","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/acrool.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-05T06:06:13.000Z","updated_at":"2025-06-03T04:30:40.000Z","dependencies_parsed_at":"2025-06-30T14:08:33.500Z","dependency_job_id":"12e30fe3-7bc5-4d36-bf9b-3c3998d119ba","html_url":"https://github.com/acrool/acrool-react-picker","commit_stats":null,"previous_names":["acrool/acrool-react-picker"],"tags_count":68,"template":false,"template_full_name":null,"purl":"pkg:github/acrool/acrool-react-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/acrool","download_url":"https://codeload.github.com/acrool/acrool-react-picker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-picker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265613869,"owners_count":23798343,"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":["react-picker","reactjs"],"created_at":"2024-11-15T10:28:04.976Z","updated_at":"2025-07-17T14:03:53.201Z","avatar_url":"https://github.com/acrool.png","language":"TypeScript","funding_links":[],"categories":["React underlying structure"],"sub_categories":[],"readme":"# Acrool React Picker\n\n\u003ca href=\"https://acrool-react-picker.pages.dev/\" title=\"Acrool React Picker - This is a react method to quickly combine buttons with Picker\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/acrool/acrool-react-picker/main/example/public/og.webp\" alt=\"Acrool React Picker Logo\"/\u003e\n\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n    This is a react method to quickly combine buttons with Picker\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![NPM](https://img.shields.io/npm/v/@acrool/react-picker.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-picker)\n[![npm](https://img.shields.io/bundlejs/size/@acrool/react-picker?style=for-the-badge)](https://github.com/acrool/@acrool/react-picker/blob/main/LICENSE)\n[![npm](https://img.shields.io/npm/l/@acrool/react-picker?style=for-the-badge)](https://github.com/acrool/react-picker/blob/main/LICENSE)\n\n[![npm downloads](https://img.shields.io/npm/dm/@acrool/react-picker.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-picker)\n[![npm](https://img.shields.io/npm/dt/@acrool/react-picker.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-picker)\n\n\u003c/div\u003e\n\n\n`^1.1.0 support react \u003e=18.0.0 \u003c20.0.0`\n\n\n\n## Features\n\n- Quickly create various Pickers such as Datepicker, timepicker, Select dropdown, etc.\n- Plug and unplug using `framer-motion`\n- Simulate the browser's native drop-down menu behavior (click outside to close, lose focus to close, open the menu when the keyboard is pressed or blank)\n- The agent menu OnChange and value changes can be controlled freely and will be saved when the menu is closed.\n\n\n## Install\n\n```bash\nyarn add @acrool/react-picker\n```\n\n## Usage\n\nadd in your index.tsx\n```tst\nimport \"@acrool/react-picker/dist/index.css\";\n```\n\nadd in your App.tsx\n\n\n```tsx\nimport {isEmpty} from '@acrool/js-utils/equal';\nimport clsx from 'clsx';\nimport React, {ForwardedRef} from 'react';\nimport styled, {css} from 'styled-components';\n\nimport NumberKeyboard from './NumberKeyboard';\nimport {createPicker, usePicker} from '@acrool/react-picker';\n\n\n\n\ninterface IProps extends FCProps {\n  value?: number\n  options?: number[]\n  onChange?: (value: number) =\u003e void\n  placeholder?: string\n}\n\n\n\n/**\n * Select Number Keyboard\n */\nconst SelectNumberKeyboard = ({\n    id,\n    placeholder = '0',\n}: IProps, ref?: ForwardedRef\u003cHTMLButtonElement\u003e) =\u003e {\n  const Picker = usePicker();\n\n  /**\n   * Clean\n   */\n  const handleClear = (e: React.MouseEvent) =\u003e {\n    e.stopPropagation();\n    Picker.onChange(0);\n  };\n\n  const isPlaceholderValue = isEmpty(Picker.value);\n\n  return \u003cSelectNumberKeyboardRoot\n          ref={ref}\n          type=\"button\"\n          onMouseDown={Picker.toggle}\n          isFocus={Picker.isInputFocus}\n          onFocus={Picker.inputFocus}\n    \u003e\n      \u003cText isPlaceholderValue={isPlaceholderValue}\u003e\n        {isPlaceholderValue ? placeholder: Picker.value}\n      \u003c/Text\u003e\n  \u003c/SelectNumberKeyboardRoot\u003e;\n};\n\n\nconst Picker = (props: IProps) =\u003e {\n  const Picker = usePicker();\n\n  const handleClickPicker = (addNumber: number) =\u003e {\n    let result = 0;\n    const currValue = Picker.value ?? 0;\n    if(addNumber \u003e= 0){\n      result = currValue + addNumber;\n    }\n    Picker.onChange(result);\n  };\n\n  return \u003cNumberKeyboard\n          data={props.options}\n          onChange={handleClickPicker}\n  /\u003e;\n};\n\nexport default createPicker(\n        SelectNumberKeyboard,\n        Picker\n);\n\n\nconst SelectNumberKeyboardRoot = styled.button\u003c{\n  isFocus?: boolean,\n}\u003e`\n    transition: box-shadow .15s ease-in-out;\n\n    ${props =\u003e props.isFocus \u0026\u0026 css`\n        box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);\n    `}\n\n`;\n```\n\n\n## If you need to automatically infer types\n\n```tsx\n\nexport default createPicker(\n        SelectNumberKeyboard,\n        Picker\n) as \u003cV extends any\u003e(props: IProps\u003cV\u003e) =\u003e JSX.Element;\n```\n\n\n## If you need to not hide trigger onChange\n\n```tsx\n\nexport default createPicker(\n        SelectNumberKeyboard,\n        Picker,\n    {\n        isEnableHideSave: false,\n        isEnableClickOutSiteHidden: false\n    }\n) as \u003cV extends any\u003e(props: IProps\u003cV\u003e) =\u003e JSX.Element;\n```\n\n\nThere is also a example that you can play with it:\n\n[![Play react-editext-example](https://raw.githubusercontent.com/acrool/acrool-react-picker/main/play-in-example-button.svg)](https://acrool-react-picker.pages.dev)\n\n\n## Precautions\n\n- The main control controls the opening and closing of the menu. You need to use `onMousedown` instead of `onClick`.\n- The main control needs to use button to have the Tab focus function, where `react-hook-form` is very useful\n- The main control needs to use button. If you want to add a clear button in the inner layer, remember that it cannot be button, because `button \u003e button` is an html structure error, and you need to use `onMousedown` instead of `onClick`.\n\n\n## Ref warning\n\n`Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?`\n\n```tsx\ninterface IProps {\n  value: string, \n  onChange:(value: string) =\u003e void\n}\nconst DateTimeField = (props: IProps) =\u003e {}\n\n// fix to \nconst DateTimeFieldAfter = (props: IProps, ref?: ForwardedRef\u003cHTMLElement\u003e) =\u003e {}\n```\n\n\n## There is an onClick event in the outer layer, causing the picker to click and trigger\n\nIt should be set in the outer layer to prevent bubbling.\n\n```tsx\nconst handleOnClick = (e: React.MouseEvent) =\u003e {\n    e.stopPropagation();\n}\n\nreturn \u003cDropdownRoot onClick={handleOnClick}\u003e\n        \u003cDropTitle\u003e{i18n('page.workspaceTask.action.subTask', {def: 'SubTask'})}\u003c/DropTitle\u003e\n    \u003c/DropdownRoot\u003e;\n```\n\n## License\n\nMIT © [Acrool](https://github.com/acrool) \u0026 [Imagine](https://github.com/imagine10255)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facrool%2Facrool-react-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Facrool%2Facrool-react-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facrool%2Facrool-react-picker/lists"}