{"_id":"@atom-design-mog/dropdown","_rev":"2-62d7111420d8ba3214bd1cc4d79b1197","name":"@atom-design-mog/dropdown","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@atom-design-mog/dropdown","version":"1.0.0","keywords":["react-native","dropdown","select","ui-component"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/dropdown@1.0.0","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"ff3b16f1165068bcef02a35dc39a1ff6b89f3a56","tarball":"https://registry.npmjs.org/@atom-design-mog/dropdown/-/dropdown-1.0.0.tgz","fileCount":3,"integrity":"sha512-4krcbwssBdclA1GFhMslDCKV4r11yaghw2QtkH2C1pjariBVXZtUmkfHJAn1ikpc+Gnu6MRamnZbq1gpEu3Gmg==","signatures":[{"sig":"MEQCIHVekCBaXHP7LXtnq1a18E3PiQ4D6R9qd+gZmKBqVSabAiBjxZ7p0W8KKPAPAOkUTOuq9y5CEQoiKN9WwNDsTCzsWg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3533},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"React Native Dropdown component with modal and dynamic positioning","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/dropdown_1.0.0_1763726381142_0.9570690257481245","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom-design-mog/dropdown","version":"1.0.1","description":"React Native Dropdown component with modal and dynamic positioning","main":"index.js","author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","dropdown","select","ui-component"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_id":"@atom-design-mog/dropdown@1.0.1","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-nN+Q+XltjALqxBIY6xOcW40/cpRKUtqX2M6Bb1JXPCJb8Hl5/Na7+B7TWg+rbAghneufrX6YiPf/lM5EgVuUVg==","shasum":"70cf4734a8f3345a45dfb621b15fbe515f41d23b","tarball":"https://registry.npmjs.org/@atom-design-mog/dropdown/-/dropdown-1.0.1.tgz","fileCount":4,"unpackedSize":7465,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD3R9Q/lWUoib7C89JWdaM4a1oslZYIlJALT+EuUzX1cQIgZ2Bz43qmX1ErfA+9+3EYk6V0nnz8YB7T6MO0G/PWif8="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dropdown_1.0.1_1763968550220_0.5845599323465731"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-21T11:59:41.078Z","modified":"2025-11-24T07:15:50.591Z","1.0.0":"2025-11-21T11:59:41.333Z","1.0.1":"2025-11-24T07:15:50.425Z"},"author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","dropdown","select","ui-component"],"description":"React Native Dropdown component with modal and dynamic positioning","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom-design-mog/dropdown\n\nA lightweight, platform-friendly **Dropdown / Select Component** for React Native. Supports anchored positioning, modal-based dropdown list, custom placeholder, labels, and flexible styling. Part of the Atom Design System.\n\n---\n\n## ๐Ÿ“ฆ Installation\n\nInstall with npm:\n\n```bash\nnpm install @atom-design-mog/dropdown\n```\n\nOr with yarn:\n\n```bash\nyarn add @atom-design-mog/dropdown\n```\n\n---\n\n## ๐Ÿš€ Import\n\n```js\nimport Dropdown from '@atom-design-mog/dropdown';\n```\n\n---\n\n## ๐ŸŽฎ Basic Usage\n\n```jsx\nconst [selected, setSelected] = useState(null);\n\n setSelected(value)}\n/>\n```\n\n---\n\n## ๐Ÿงฉ Props\n\n| Prop | Type | Description |\n| ----------------- | -------------------- | ------------------------------------------------------ |\n| **label** | string | Optional label shown above the trigger |\n| **triggerText** | string | Text shown inside the dropdown trigger |\n| **options** | `[{ label, value }]` | Array of items to show in dropdown |\n| **onSelect** | function | Callback fired with `value` when an option is selected |\n| **placeholder** | string | Default text when `triggerText` is not provided |\n| **style** | object | Custom container wrapper styles |\n| **dropdownStyle** | object | Additional style for dropdown list container |\n\n\n---\n\n## โญ Features\n\n- Anchored dropdown using `measureInWindow` to match trigger position and width\n- Modal-based dropdown ensures it renders above all screens\n- Cross-platform: consistent behaviour on Android & iOS\n- Label support and customizable trigger text / placeholder\n- Scrollable list for long menus\n- Automatic width matching the trigger (can be overridden with `dropdownStyle`)\n- Shadow, elevation and border-ready styles included\n- Zero runtime dependencies (just React Native primitives)\n\n---\n\n## ๐Ÿงช Example Test Screen\n\n```jsx\nimport React, { useState } from 'react';\nimport { View, Text, ScrollView } from 'react-native';\nimport Dropdown from '@atom-design-mog/dropdown';\n\nexport default function TestDropdownScreen() {\n const [selected, setSelected] = useState(null);\n\n const options = [\n { label: 'Option 1 - Apple', value: 'Apple' },\n { label: 'Option 2 - Banana', value: 'Banana' },\n { label: 'Option 3 - Cherry', value: 'Cherry' },\n { label: 'Option 4 - Orange', value: 'Orange' },\n ];\n\n return (\n \n \n\n {/* Basic Test */}\n \n Dropdown Demo\n setSelected(val)}\n />\n \n\n {/* Placeholder Example */}\n \n console.log('Picked:', val)}\n />\n \n\n {/* Narrow Trigger Example */}\n \n console.log('Small trigger ->', val)}\n />\n \n\n \n \n );\n}\n```\n\n---\n\n## ๐Ÿ‘ค Author\n\nAvi Gupta\n","readmeFilename":"README.md"}