react-country-kit 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +59 -14
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,43 +1,88 @@
|
|
|
1
1
|
# react-country-kit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Beautiful, accessible, and performant React components for choosing countries, currencies, timezones, and more.
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
- **Standard
|
|
8
|
-
- **
|
|
9
|
-
- **
|
|
10
|
-
- **
|
|
7
|
+
- **Standard & Shadcn Variants**: Comes with two pre-built styles.
|
|
8
|
+
- **Accessible**: Built with accessibility in mind (ARIA roles, keyboard navigation).
|
|
9
|
+
- **Responsive**: Works perfectly on mobile and desktop.
|
|
10
|
+
- **Reliable Flags**: Automatic image fallback for Windows users.
|
|
11
|
+
- **Tree-shakeable**: Only bundle what you use.
|
|
11
12
|
|
|
12
13
|
## Installation
|
|
13
14
|
|
|
14
15
|
```bash
|
|
15
|
-
npm install react-country-kit
|
|
16
|
+
npm install react-country-kit react-country-kit-core
|
|
16
17
|
```
|
|
17
18
|
|
|
18
19
|
## Usage
|
|
19
20
|
|
|
20
|
-
### Standard
|
|
21
|
+
### 1. Standard UI (Vanilla CSS)
|
|
22
|
+
|
|
23
|
+
Simple, clean components with no external styling dependencies.
|
|
21
24
|
|
|
22
25
|
```tsx
|
|
23
|
-
import { CountryPicker } from 'react-country-kit';
|
|
24
|
-
import 'react-country-kit/styles';
|
|
26
|
+
import { CountryPicker, PhoneInput } from 'react-country-kit';
|
|
27
|
+
import 'react-country-kit/styles'; // Don't forget the CSS!
|
|
25
28
|
|
|
26
|
-
function
|
|
27
|
-
return
|
|
29
|
+
function StandardApp() {
|
|
30
|
+
return (
|
|
31
|
+
<div className="space-y-4">
|
|
32
|
+
<CountryPicker onChange={console.log} label="Select Country" />
|
|
33
|
+
<PhoneInput onChange={console.log} label="Phone Number" />
|
|
34
|
+
</div>
|
|
35
|
+
);
|
|
28
36
|
}
|
|
29
37
|
```
|
|
30
38
|
|
|
31
|
-
### Shadcn Variant
|
|
39
|
+
### 2. Shadcn/UI Variant (Tailwind + Radix)
|
|
40
|
+
|
|
41
|
+
Premium, modern components that blend perfectly with your Shadcn/UI project.
|
|
32
42
|
|
|
33
43
|
```tsx
|
|
34
44
|
import { CountryPicker } from 'react-country-kit/ui';
|
|
35
45
|
|
|
36
|
-
function
|
|
37
|
-
return
|
|
46
|
+
function ShadcnApp() {
|
|
47
|
+
return (
|
|
48
|
+
<div className="p-10 max-w-md">
|
|
49
|
+
<CountryPicker
|
|
50
|
+
onChange={console.log}
|
|
51
|
+
label="Destination"
|
|
52
|
+
showFlag={true}
|
|
53
|
+
showPhoneCode={true}
|
|
54
|
+
/>
|
|
55
|
+
</div>
|
|
56
|
+
);
|
|
38
57
|
}
|
|
39
58
|
```
|
|
40
59
|
|
|
60
|
+
> **Note**: The Shadcn variant requires `tailwindcss`, `clsx`, `tailwind-merge`, and `@radix-ui/react-popover` as peer dependencies.
|
|
61
|
+
|
|
62
|
+
## Components List
|
|
63
|
+
|
|
64
|
+
- `CountryPicker`
|
|
65
|
+
- `CountryMultiSelect`
|
|
66
|
+
- `PhoneInput`
|
|
67
|
+
- `CurrencyPicker`
|
|
68
|
+
- `CurrencyMultiSelect`
|
|
69
|
+
- `TimezonePicker`
|
|
70
|
+
- `LanguagePicker`
|
|
71
|
+
- `DivisionPicker`
|
|
72
|
+
|
|
73
|
+
## Props
|
|
74
|
+
|
|
75
|
+
Most components share a similar API:
|
|
76
|
+
|
|
77
|
+
| Prop | Type | Description |
|
|
78
|
+
| :--- | :--- | :--- |
|
|
79
|
+
| `value` | `T` | The current selected value. |
|
|
80
|
+
| `onChange` | `(val: T) => void` | Callback when value changes. |
|
|
81
|
+
| `label` | `string` | Optional field label. |
|
|
82
|
+
| `placeholder` | `string` | Input placeholder. |
|
|
83
|
+
| `showFlag` | `boolean` | Whether to show the country flag (default: true). |
|
|
84
|
+
| `disabled` | `boolean` | Disable the component. |
|
|
85
|
+
|
|
41
86
|
## License
|
|
42
87
|
|
|
43
88
|
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-country-kit",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "A comprehensive React component library for country, currency, timezone, language, and division picking. Supports both vanilla CSS and shadcn/Tailwind CSS variants.",
|
|
5
5
|
"author": "Kishor Mainali",
|
|
6
6
|
"license": "MIT",
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"vite-plugin-dts": "^3.7.0"
|
|
84
84
|
},
|
|
85
85
|
"dependencies": {
|
|
86
|
-
"react-country-kit-core": "^1.1.
|
|
86
|
+
"react-country-kit-core": "^1.1.1",
|
|
87
87
|
"libphonenumber-js": "^1.12.42"
|
|
88
88
|
},
|
|
89
89
|
"repository": {
|