react-country-list-picker 1.0.0

package/README.md

@@ -0,0 +1,102 @@
+# react-country-list-picker
+
+A cross-platform country list / picker component **and** country dataset
+(name, dial code, ISO code, flag emoji) that works in both **React (web)**
+and **React Native** — with no extra config on your end.
+
+It ships two versions of the `CountryList` component:
+
+- `CountryList.js` — plain HTML/CSS, used automatically in web projects (CRA, Vite, Next.js, etc.)
+- `CountryList.native.js` — built with React Native primitives (`View`, `FlatList`, ...)
+
+React Native's Metro bundler automatically prefers `*.native.js` files, and
+web bundlers (Webpack/Vite) just resolve the plain `.js` file — so you import
+from the **same path** in both platforms and get the right component.
+
+## Install
+
+```bash
+npm install react-country-list-picker
+# or
+yarn add react-country-list-picker
+```
+
+React is a peer dependency (React Native is optional and only needed if
+you're using it in an RN project — you already have it there).
+
+## Usage (identical code on web and React Native)
+
+```tsx
+import { CountryList, Country } from 'react-country-list-picker';
+
+function MyPicker() {
+  const handleSelect = (country: Country) => {
+    console.log(country.name, country.dial_code, country.code);
+  };
+
+  return <CountryList onSelect={handleSelect} />;
+}
+```
+
+### Props
+
+| Prop                | Type                          | Default             | Description                              |
+|---------------------|-------------------------------|----------------------|-------------------------------------------|
+| `onSelect`          | `(country: Country) => void`  | —                    | Called when a country row is tapped/clicked |
+| `data`              | `Country[]`                  | full built-in list   | Pass a filtered/custom dataset            |
+| `searchable`        | `boolean`                     | `true`               | Show/hide the built-in search box         |
+| `searchPlaceholder` | `string`                      | `"Search country..."`| Placeholder for the search box            |
+
+### Using just the raw data (no UI)
+
+```ts
+import { countries } from 'react-country-list-picker';
+
+console.log(countries[0]);
+// { name: "Afghanistan", dial_code: "+93", code: "AF", Icon: "🇦🇫" }
+```
+
+## Project structure
+
+```
+country-list-picker/
+├─ src/
+│  ├─ data/countries.json      # the dataset
+│  ├─ CountryList.tsx          # web version
+│  ├─ CountryList.native.tsx   # React Native version
+│  ├─ types.ts
+│  └─ index.ts                 # public entry point
+├─ dist/                       # compiled output (generated, published to npm)
+├─ package.json
+├─ tsconfig.json
+└─ README.md
+```
+
+## Build
+
+```bash
+npm install
+npm run build   # compiles src/ -> dist/ with tsc
+```
+
+## Publish to npm
+
+1. Update `"name"` in `package.json` to something unique on the npm registry
+   (check availability at https://www.npmjs.com/).
+2. Bump `"version"` following semver.
+3. Log in and publish:
+
+```bash
+npm login
+npm publish --access public
+```
+
+`prepublishOnly` automatically runs the build first, so `dist/` is always
+fresh when you publish.
+
+## Notes / next steps you may want
+
+- Add your own logo/name/license details in `package.json`.
+- Add a `styles` prop or theme support if you want consumers to restyle rows.
+- Add unit tests (e.g. with Jest + React Testing Library) before publishing v1.
+- Set up CI (GitHub Actions) to run `npm run build` on every push.

package/dist/CountryList.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CountryListProps } from './types';
+export default function CountryList({ onSelect, data, searchable, searchPlaceholder, }: CountryListProps): React.JSX.Element;

package/dist/CountryList.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = CountryList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const countries_json_1 = __importDefault(require("./data/countries.json"));
+const styles = {
+    container: {
+        width: '100%',
+        maxWidth: 360,
+        border: '1px solid #e0e0e0',
+        borderRadius: 8,
+        fontFamily: 'sans-serif',
+        overflow: 'hidden',
+    },
+    search: {
+        width: '100%',
+        boxSizing: 'border-box',
+        padding: '10px 12px',
+        border: 'none',
+        borderBottom: '1px solid #e0e0e0',
+        outline: 'none',
+        fontSize: 14,
+    },
+    list: {
+        maxHeight: 320,
+        overflowY: 'auto',
+    },
+    row: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+        padding: '10px 12px',
+        cursor: 'pointer',
+    },
+    flag: {
+        fontSize: 20,
+    },
+    name: {
+        flex: 1,
+        fontSize: 14,
+        color: '#222',
+    },
+    dial: {
+        fontSize: 13,
+        color: '#888',
+    },
+};
+function CountryList({ onSelect, data, searchable = true, searchPlaceholder = 'Search country...', }) {
+    const [query, setQuery] = (0, react_1.useState)('');
+    const source = data !== null && data !== void 0 ? data : countries_json_1.default;
+    const filtered = (0, react_1.useMemo)(() => {
+        if (!query.trim())
+            return source;
+        const q = query.trim().toLowerCase();
+        return source.filter((c) => c.name.toLowerCase().includes(q) ||
+            c.dial_code.includes(q) ||
+            c.code.toLowerCase().includes(q));
+    }, [query, source]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: styles.container, children: [searchable && ((0, jsx_runtime_1.jsx)("input", { style: styles.search, placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value) })), (0, jsx_runtime_1.jsx)("div", { style: styles.list, children: filtered.map((country) => ((0, jsx_runtime_1.jsxs)("div", { style: styles.row, onClick: () => onSelect(country), children: [(0, jsx_runtime_1.jsx)("span", { style: styles.flag, children: country.Icon }), (0, jsx_runtime_1.jsx)("span", { style: styles.name, children: country.name }), (0, jsx_runtime_1.jsx)("span", { style: styles.dial, children: country.dial_code })] }, country.code))) })] }));
+}

package/dist/CountryList.native.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CountryListProps } from './types';
+export default function CountryList({ onSelect, data, searchable, searchPlaceholder, }: CountryListProps): React.JSX.Element;

package/dist/CountryList.native.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = CountryList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const countries_json_1 = __importDefault(require("./data/countries.json"));
+function CountryList({ onSelect, data, searchable = true, searchPlaceholder = 'Search country...', }) {
+    const [query, setQuery] = (0, react_1.useState)('');
+    const source = data !== null && data !== void 0 ? data : countries_json_1.default;
+    const filtered = (0, react_1.useMemo)(() => {
+        if (!query.trim())
+            return source;
+        const q = query.trim().toLowerCase();
+        return source.filter((c) => c.name.toLowerCase().includes(q) ||
+            c.dial_code.includes(q) ||
+            c.code.toLowerCase().includes(q));
+    }, [query, source]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [searchable && ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: styles.search, placeholder: searchPlaceholder, value: query, onChangeText: setQuery })), (0, jsx_runtime_1.jsx)(react_native_1.FlatList, { data: filtered, keyExtractor: (item) => item.code, renderItem: ({ item }) => ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: styles.row, onPress: () => onSelect(item), children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.flag, children: item.Icon }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.name, children: item.name }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.dial, children: item.dial_code })] })) })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+        maxWidth: 360,
+        borderWidth: 1,
+        borderColor: '#e0e0e0',
+        borderRadius: 8,
+        overflow: 'hidden',
+    },
+    search: {
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e0e0e0',
+        fontSize: 14,
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        gap: 10,
+    },
+    flag: {
+        fontSize: 20,
+        marginRight: 10,
+    },
+    name: {
+        flex: 1,
+        fontSize: 14,
+        color: '#222',
+    },
+    dial: {
+        fontSize: 13,
+        color: '#888',
+    },
+});