{"_id":"@atechhub/use-countries","_rev":"2-db719adbc32145be8e8fa7be0da9d8f0","name":"@atechhub/use-countries","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@atechhub/use-countries","version":"0.0.1","keywords":["react","hook","countries"],"author":{"name":"A Tech Hub"},"license":"MIT","_id":"@atechhub/use-countries@0.0.1","maintainers":[{"name":"atechhub24","email":"atechhub24.7@gmail.com"}],"dist":{"shasum":"9934e279b3c15605d961753b2ea3652790072316","tarball":"https://registry.npmjs.org/@atechhub/use-countries/-/use-countries-0.0.1.tgz","fileCount":10,"integrity":"sha512-PyPILLR+NT0roZqKfQp0ps5dWZpUJGxEC/Uf2zbtV1t631rzXyolA57jWbUHoBiVAM6Fa17IQQjf9AO0h7OWgw==","signatures":[{"sig":"MEQCIEJNQqrpKFqna3xixuiKN9KODjM3ZHrVRdILKpHi2w6zAiB7fJeODPoVLaxRE1aLVVqbpIvoYXDazx3LYVYS2nO+KQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":94660},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"gitHead":"5fe609a500bfa59cb66072801eeafcf7effafe35","scripts":{"build":"rollup -c"},"_npmUser":{"name":"atechhub24","email":"atechhub24.7@gmail.com"},"_npmVersion":"11.6.0","description":"A React hook providing country data (name, code, phone) with filtering, sorting, and optional flag images","directories":{},"_nodeVersion":"24.6.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","rollup":"^4.50.2","typescript":"^5.9.2","rollup-plugin-dts":"^6.2.3","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^28.0.6","@rollup/plugin-typescript":"^12.1.4","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^19.1.1"},"_npmOperationalInternal":{"tmp":"tmp/use-countries_0.0.1_1757956518849_0.8244828714961352","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@atechhub/use-countries","version":"0.0.2","description":"A React hook providing country data (name, code, phone) with filtering, sorting, and optional flag images","keywords":["react","hook","countries"],"license":"MIT","author":{"name":"A Tech Hub"},"repository":{"type":"git","url":"git+https://github.com/atechhub24/use-countries.git"},"type":"module","main":"dist/index.cjs","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.cjs","types":"./dist/index.d.ts"}},"scripts":{"build":"rollup -c"},"devDependencies":{"@rollup/plugin-commonjs":"^28.0.6","@rollup/plugin-node-resolve":"^16.0.1","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^12.1.4","rollup":"^4.50.2","rollup-plugin-dts":"^6.2.3","rollup-plugin-peer-deps-external":"^2.2.4","tslib":"^2.8.1","typescript":"^5.9.2"},"peerDependencies":{"react":"^19.1.1"},"publishConfig":{"access":"public"},"_id":"@atechhub/use-countries@0.0.2","gitHead":"8795835c5691edf77716fb3a5584548a7abfa9d5","bugs":{"url":"https://github.com/atechhub24/use-countries/issues"},"homepage":"https://github.com/atechhub24/use-countries#readme","_nodeVersion":"24.6.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-Na6pwO16XGq1PkpZGMmIEZ3HcUFLEX3ysHwkDEQtIHSSpafP6ua3nICBI/mIoMd3L1cMJ8arFLs0tk18S8PVOw==","shasum":"68a062b023683fecd50376f9eda7e8a31b4ab15c","tarball":"https://registry.npmjs.org/@atechhub/use-countries/-/use-countries-0.0.2.tgz","fileCount":10,"unpackedSize":94844,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCu9bwOb6zRKXpy6OiJKBgkFDM/hhGlaeyRmp1e4/zAmwIhAM98kLsBlZ8e1jBEnrr09D5tvPp5X7KMwqm/SHSv4NqM"}]},"_npmUser":{"name":"atechhub24","email":"atechhub24.7@gmail.com"},"directories":{},"maintainers":[{"name":"atechhub24","email":"atechhub24.7@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/use-countries_0.0.2_1757957545264_0.5716012394160197"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-15T17:15:18.754Z","modified":"2025-09-15T17:32:25.654Z","0.0.1":"2025-09-15T17:15:19.023Z","0.0.2":"2025-09-15T17:32:25.450Z"},"author":{"name":"A Tech Hub"},"license":"MIT","keywords":["react","hook","countries"],"description":"A React hook providing country data (name, code, phone) with filtering, sorting, and optional flag images","maintainers":[{"name":"atechhub24","email":"atechhub24.7@gmail.com"}],"readme":"# use-countries\n\nA powerful React hook providing comprehensive country data including names, codes, phone numbers, and flag images. Perfect for forms, dropdowns, and international applications.\n\n[![npm version](https://badge.fury.io/js/@atechhub%2Fuse-countries.svg)](https://badge.fury.io/js/@atechhub%2Fuse-countries)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## Features\n\n- 🌍 **Complete Country Data**: 195+ countries with ISO codes, names, and phone codes\n- 🏳️ **Flag Support**: Emoji flags, PNG images (20px, 40px), and SVG flags\n- πŸ” **Flexible Filtering**: Custom filter functions for any use case\n- πŸ“Š **Smart Sorting**: Sort by label, code, or phone number\n- ⚑ **TypeScript Ready**: Full type safety with conditional types\n- 🎯 **Zero Dependencies**: Lightweight with no external dependencies\n- πŸ“± **Mobile Optimized**: Responsive flag images with srcSet support\n\n## Installation\n\n```bash\nnpm install @atechhub/use-countries\n```\n\n```bash\nyarn add @atechhub/use-countries\n```\n\n```bash\npnpm add @atechhub/use-countries\n```\n\n```bash\nbun add @atechhub/use-countries\n```\n\n## Quick Start\n\n```tsx\nimport { useCountries } from \"@atechhub/use-countries\";\n\nfunction CountrySelector() {\n const countries = useCountries({});\n\n return (\n \n );\n}\n```\n\n## API Reference\n\n### `useCountries(options)`\n\nReturns an array of country objects based on the provided options.\n\n#### Options\n\n| Option | Type | Default | Description |\n| -------------- | -------------------------------------------------------------- | ----------- | ----------------------------------- |\n| `includeFlags` | `boolean` | `false` | Include flag data (emoji, PNG, SVG) |\n| `filter` | `(country: Country) => boolean` | `undefined` | Custom filter function |\n| `sort` | `{ by: 'label' \\| 'code' \\| 'phone', order: 'asc' \\| 'desc' }` | `undefined` | Sort configuration |\n\n#### Return Types\n\n- `Country[]` when `includeFlags: false`\n- `CountryWithFlags[]` when `includeFlags: true`\n\n### Data Types\n\n```typescript\ntype Country = {\n code: string; // ISO 3166-1 alpha-2 code (e.g., \"US\")\n label: string; // Country name (e.g., \"United States\")\n phone: string; // Phone code (e.g., \"1\")\n};\n\ntype CountryWithFlags = Country & {\n flagEmoji: string; // Emoji flag (e.g., \"πŸ‡ΊπŸ‡Έ\")\n flagPng20: string; // 20px PNG flag URL\n flagPng40: string; // 40px PNG flag URL\n flagSvg: string; // SVG flag URL\n srcSet: string; // Responsive srcSet for PNG flags\n};\n```\n\n## Usage Examples\n\n### Basic Usage\n\n```tsx\nimport { useCountries } from \"@atechhub/use-countries\";\n\nfunction BasicExample() {\n const countries = useCountries({});\n\n return (\n
\n {countries.map((country) => (\n
\n {country.label} ({country.code}) - +{country.phone}\n
\n ))}\n
\n );\n}\n```\n\n### With Flags\n\n```tsx\nimport { useCountries } from \"@atechhub/use-countries\";\n\nfunction FlagsExample() {\n const countries = useCountries({ includeFlags: true });\n\n return (\n
\n {countries.map((country) => (\n
\n {country.flagEmoji}\n {country.label}\n {`${country.label}\n
\n ))}\n
\n );\n}\n```\n\n### Sorting\n\n```tsx\nimport { useCountries } from \"@atechhub/use-countries\";\n\nfunction SortingExample() {\n const countries = useCountries({\n sort: { by: \"label\", order: \"asc\" },\n includeFlags: true,\n });\n\n return (\n
\n {countries.map((country) => (\n
\n {country.flagEmoji} {country.label}\n
\n ))}\n
\n );\n}\n```\n\n### Filtering\n\n```tsx\nimport { useCountries } from \"@atechhub/use-countries\";\n\nfunction FilteringExample() {\n const [searchTerm, setSearchTerm] = useState(\"\");\n\n const countries = useCountries({\n filter: searchTerm\n ? (country) =>\n country.label.toLowerCase().includes(searchTerm.toLowerCase()) ||\n country.code.toLowerCase().includes(searchTerm.toLowerCase())\n : undefined,\n includeFlags: true,\n });\n\n return (\n
\n setSearchTerm(e.target.value)}\n />\n\n {countries.map((country) => (\n
\n {country.flagEmoji} {country.label} ({country.code})\n
\n ))}\n
\n );\n}\n```\n\n### Advanced Usage\n\n```tsx\nimport { useCountries } from \"@atechhub/use-countries\";\n\nfunction AdvancedExample() {\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [sortBy, setSortBy] = useState<\"label\" | \"code\" | \"phone\">(\"label\");\n\n const countries = useCountries({\n includeFlags: true,\n sort: { by: sortBy, order: \"asc\" },\n filter: searchTerm\n ? (country) =>\n country.label.toLowerCase().includes(searchTerm.toLowerCase()) ||\n country.code.toLowerCase().includes(searchTerm.toLowerCase()) ||\n country.phone.includes(searchTerm)\n : undefined,\n });\n\n return (\n
\n
\n setSearchTerm(e.target.value)}\n />\n\n setSortBy(e.target.value as any)}\n >\n \n \n \n \n
\n\n
Found {countries.length} countries
\n\n
\n {countries.map((country) => (\n
\n
{country.flagEmoji}
\n
\n

{country.label}

\n

\n {country.code} β€’ +{country.phone}\n

\n
\n {`${country.label}\n
\n ))}\n
\n
\n );\n}\n```\n\n## Use Cases\n\n### Country Selector Dropdown\n\n```tsx\nfunction CountryDropdown() {\n const countries = useCountries({ includeFlags: true });\n\n return (\n \n );\n}\n```\n\n### Phone Number Input\n\n```tsx\nfunction PhoneInput() {\n const countries = useCountries({});\n const [selectedCountry, setSelectedCountry] = useState(\"US\");\n\n const selectedCountryData = countries.find((c) => c.code === selectedCountry);\n\n return (\n
\n setSelectedCountry(e.target.value)}\n >\n {countries.map((country) => (\n \n ))}\n \n\n \n
\n );\n}\n```\n\n### Country Cards Display\n\n```tsx\nfunction CountryCards() {\n const countries = useCountries({\n includeFlags: true,\n sort: { by: \"label\", order: \"asc\" },\n });\n\n return (\n
\n {countries.map((country) => (\n
\n
\n {`${country.label}\n
\n
\n

{country.label}

\n

Code: {country.code}

\n

Phone: +{country.phone}

\n
\n
\n ))}\n
\n );\n}\n```\n\n### Searchable Country List\n\n```tsx\nfunction SearchableCountryList() {\n const [query, setQuery] = useState(\"\");\n\n const countries = useCountries({\n includeFlags: true,\n filter: query\n ? (country) => country.label.toLowerCase().includes(query.toLowerCase())\n : undefined,\n });\n\n return (\n
\n setQuery(e.target.value)}\n />\n\n
{countries.length} countries found
\n\n \n
\n );\n}\n```\n\n## Flag Images\n\nThe hook provides multiple flag formats:\n\n- **Emoji Flags**: Unicode flag emojis (πŸ‡ΊπŸ‡Έ, πŸ‡¬πŸ‡§, etc.)\n- **PNG Images**: 20px and 40px PNG flags from flagcdn.com\n- **SVG Flags**: High-quality SVG flags\n- **Responsive**: Built-in srcSet for responsive images\n\n```tsx\nconst countries = useCountries({ includeFlags: true });\n\ncountries.forEach((country) => {\n console.log(country.flagEmoji); // πŸ‡ΊπŸ‡Έ\n console.log(country.flagPng20); // https://flagcdn.com/w20/us.png\n console.log(country.flagPng40); // https://flagcdn.com/w40/us.png\n console.log(country.flagSvg); // https://flagcdn.com/us.svg\n console.log(country.srcSet); // https://flagcdn.com/w40/us.png 2x\n});\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n","readmeFilename":"README.md","homepage":"https://github.com/atechhub24/use-countries#readme","repository":{"type":"git","url":"git+https://github.com/atechhub24/use-countries.git"},"bugs":{"url":"https://github.com/atechhub24/use-countries/issues"}}