{"_id":"@athinakantis/react-country-select","name":"@athinakantis/react-country-select","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@athinakantis/react-country-select","version":"1.0.0","description":"A lightweight, customizable country dropdown for react. Can be styled with vanilla CSS or tailwind","keywords":["country","select","dropdown","react","tailwindcss","tailwind","css"],"homepage":"https://github.com/athinakantis/react-country-select#readme","bugs":{"url":"https://github.com/athinakantis/react-country-select/issues"},"repository":{"type":"git","url":"git+https://github.com/athinakantis/react-country-select.git"},"license":"ISC","author":{"name":"Athina Kantis"},"type":"module","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"main":"./dist/index.cjs","types":"./dist/index.d.ts","scripts":{"build":"vite build","dev":"cd example/src && vite"},"dependencies":{"react-country-select":"file:."},"devDependencies":{"@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","react":"^19.2.6","react-dom":"^19.2.6","typescript":"^6.0.3","vite":"^8.0.11","vite-plugin-dts":"^5.0.0","vite-plugin-lib-inject-css":"^2.2.2"},"peerDependencies":{"react":">=18 || >=19","react-dom":">=18 || >=19"},"module":"./dist/index.js","sideEffects":["**/*.css"],"gitHead":"a63dd04c70c3a53fe37bc31be0bfb90428886a72","_id":"@athinakantis/react-country-select@1.0.0","_nodeVersion":"24.10.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-BlnxQIMSeVI2vyquFcgQPF7GVY3u7K9DTDBTCjbYwrbdPOt5lfxfAu76Iw/M4SX7JBIMN+kb09Hhq1Me33M32g==","shasum":"122b9da48b9693dc50fdd8054cd3d93498d651b3","tarball":"https://registry.npmjs.org/@athinakantis/react-country-select/-/react-country-select-1.0.0.tgz","fileCount":14,"unpackedSize":208188,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDdj8pTamPiFqEn2C3keJgHQkfApel61G6ogXJ1tqc/cAIhAJcuAaVWIZ90hjBPzkvW7sJLASAHiK2JD88U1gLwQEfE"}]},"_npmUser":{"name":"athinakantis","email":"athina.kantis@gmail.com"},"directories":{},"maintainers":[{"name":"athinakantis","email":"athina.kantis@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-country-select_1.0.0_1778572337890_0.3681256335954799"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-12T07:52:17.807Z","1.0.0":"2026-05-12T07:52:18.011Z","modified":"2026-05-12T07:52:18.217Z"},"maintainers":[{"name":"athinakantis","email":"athina.kantis@gmail.com"}],"description":"A lightweight, customizable country dropdown for react. Can be styled with vanilla CSS or tailwind","homepage":"https://github.com/athinakantis/react-country-select#readme","keywords":["country","select","dropdown","react","tailwindcss","tailwind","css"],"repository":{"type":"git","url":"git+https://github.com/athinakantis/react-country-select.git"},"author":{"name":"Athina Kantis"},"bugs":{"url":"https://github.com/athinakantis/react-country-select/issues"},"license":"ISC","readme":"## Usage\r\n\r\n```jsx\r\nimport CountrySelect, { type Country } from \"react-country-select\";\r\n\r\nfunction App() {\r\n  return <CountrySelect onSelect={(c: Country) => console.log(c.name)} />\r\n}\r\n```\r\n\r\n### Props:\r\n\r\n| Name              | Type                 | Required | Default        | Description                                                                         |\r\n| ----------------- | -------------------- | -------- | -------------- | ----------------------------------------------------------------------------------- |\r\n| `onSelect`        | func                 | Yes      | `null`         | Callback function when a country is selected. Returns the country object.           |\r\n| `defaultCountry`  | object               | No       | `countries[0]` | The default country code to be selected.                                            |\r\n| `rtl`             | boolean              | No       | `false`        | Whether to display data from right-to-left                                          |\r\n| `showPhoneNumber` | boolean              | No       | `false`        | Show the country calling code                                                       |\r\n| `size`            | \"sm\", \"md\" or \"lg\"   | No       | `\"md\"`         | Size of the component.                                                              |\r\n| `rounded`         | \"none\", \"sm\" or \"md\" | No       | `\"none\"`       | Border radius of the component                                                      |\r\n| `unstyled`        | boolean              | No       | `false`        | Whether or not to apply basic styling. Set this to `true` if using tailwind styling |\r\n| `classNames`      | object               | No       | `null`         | For tailwind styling. [See more](#tailwind-styling)                                 |\r\n\r\n### Tailwind Styling\r\n\r\nFor styling with tailwind, provide an object with the following (optional) properties to the `classNames` props.  \r\n**Do not forget to use the `unstyled` prop**\r\n\r\n| Property       | Description                                                                |\r\n| -------------- | -------------------------------------------------------------------------- |\r\n| wrapper        | This is the overall wrapper/parent of the component                        |\r\n| trigger        | The button that triggers the dropdown                                      |\r\n| dropdown       | The container of the search field and countries list                       |\r\n| searchField    | The search field                                                           |\r\n| optionsWrapper | The container of the list of countries. Does not contain the search field. |\r\n| option         | Class that applies to all country options                                  |\r\n| icon           | The arrow down icon                                                        |\r\n\r\n","readmeFilename":"README.md","_rev":"1-a9e771eb48a126f1293722f5f7833048"}