react-language-combobox 1.0.1 → 1.0.2
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 +82 -82
- package/package.json +59 -59
package/README.md
CHANGED
|
@@ -1,83 +1,83 @@
|
|
|
1
|
-
# react-language-picker
|
|
2
|
-
|
|
3
|
-
> Small, accessible React language picker component with optional flags and customizable theme classes.
|
|
4
|
-
|
|
5
|
-
Install
|
|
6
|
-
-------
|
|
7
|
-
|
|
8
|
-
Install from npm:
|
|
9
|
-
|
|
10
|
-
```bash
|
|
11
|
-
npm install react-language-picker
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
Usage
|
|
15
|
-
-----
|
|
16
|
-
|
|
17
|
-
```tsx
|
|
18
|
-
import React from 'react'
|
|
19
|
-
import { createRoot } from 'react-dom/client'
|
|
20
|
-
import { useTranslation } from 'react-i18next'
|
|
21
|
-
import { LanguagePicker } from 'react-language-picker'
|
|
22
|
-
|
|
23
|
-
import './i18n' // make sure i18n is initialized
|
|
24
|
-
|
|
25
|
-
function App(){
|
|
26
|
-
const { t, i18n } = useTranslation();
|
|
27
|
-
|
|
28
|
-
return (
|
|
29
|
-
<LanguagePicker
|
|
30
|
-
languages={[ 'en', 'fr', 'de', 'es' ]}
|
|
31
|
-
defaultLanguage={i18n.resolvedLanguage}
|
|
32
|
-
showFlags={true}
|
|
33
|
-
showEnglishNames={true}
|
|
34
|
-
languageChanged={(lng) => i18n.changeLanguage(lng)} />
|
|
35
|
-
|
|
36
|
-
<h1>{t('WelcomeToReact')}</h1>
|
|
37
|
-
)
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
Available exports
|
|
43
|
-
-----------------
|
|
44
|
-
|
|
45
|
-
- `LanguagePicker` — main component
|
|
46
|
-
- `defaultTheme` — default theme class names (Tailwind-friendly)
|
|
47
|
-
- Types: `LanguagePickerProperties`, `LanguagePickerTheme`
|
|
48
|
-
|
|
49
|
-
Props / Options
|
|
50
|
-
---------------
|
|
51
|
-
|
|
52
|
-
The component accepts a `LanguagePickerProperties` object with these fields:
|
|
53
|
-
|
|
54
|
-
- `languages?: string[]` — array of language tags (e.g. `['en','de','fr']`). Required for rendering; if empty the component returns `null`.
|
|
55
|
-
- `defaultLanguage?: string` — initial selected language (default: `en`).
|
|
56
|
-
- `languageChanged?: (lng: string) => void` — callback invoked when user selects a language.
|
|
57
|
-
- `classNames?: string` — additional class names applied to the root container.
|
|
58
|
-
- `useAbbreviations?: boolean` — when true, display language codes (`en`) instead of localized names.
|
|
59
|
-
- `showFlags?: boolean` — when true, shows flag icons next to languages (default: `true`).
|
|
60
|
-
- `showEnglishNames?: boolean` — when true, display language names in English rather than the selected locale.
|
|
61
|
-
- `theme?: LanguagePickerTheme` — override default classes for styling. See below.
|
|
62
|
-
|
|
63
|
-
Theme
|
|
64
|
-
-----
|
|
65
|
-
|
|
66
|
-
`LanguagePickerTheme` contains these optional string fields (class names are appended directly, so Tailwind or plain CSS works):
|
|
67
|
-
|
|
68
|
-
- `container` — wrapper container classes (default: `inline-block relative`).
|
|
69
|
-
- `button` — classes for the toggle button (default includes rounded border, padding, and layout).
|
|
70
|
-
- `list` — classes for the dropdown list (default includes absolute positioning, border, max-height and scrolling behavior).
|
|
71
|
-
- `item` — classes for each list item (hover/focus state classes recommended).
|
|
72
|
-
- `selectedItem` — classes applied to the selected list item.
|
|
73
|
-
|
|
74
|
-
Accessibility
|
|
75
|
-
-------------
|
|
76
|
-
|
|
77
|
-
The component uses ARIA roles (`listbox` / `option`) and keyboard navigation (ArrowUp/ArrowDown, Enter/Space to select). When the list is closed focus returns to the toggle button.
|
|
78
|
-
|
|
79
|
-
Notes
|
|
80
|
-
-----
|
|
81
|
-
|
|
82
|
-
- The library externals `react` and `react-dom` to avoid bundling React into your app. Ensure those are installed in your host project.
|
|
1
|
+
# react-language-picker
|
|
2
|
+
|
|
3
|
+
> Small, accessible React language picker component with optional flags and customizable theme classes.
|
|
4
|
+
|
|
5
|
+
Install
|
|
6
|
+
-------
|
|
7
|
+
|
|
8
|
+
Install from npm:
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install react-language-picker
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Usage
|
|
15
|
+
-----
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import React from 'react'
|
|
19
|
+
import { createRoot } from 'react-dom/client'
|
|
20
|
+
import { useTranslation } from 'react-i18next'
|
|
21
|
+
import { LanguagePicker } from 'react-language-picker'
|
|
22
|
+
|
|
23
|
+
import './i18n' // make sure i18n is initialized
|
|
24
|
+
|
|
25
|
+
function App(){
|
|
26
|
+
const { t, i18n } = useTranslation();
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<LanguagePicker
|
|
30
|
+
languages={[ 'en', 'fr', 'de', 'es' ]}
|
|
31
|
+
defaultLanguage={i18n.resolvedLanguage}
|
|
32
|
+
showFlags={true}
|
|
33
|
+
showEnglishNames={true}
|
|
34
|
+
languageChanged={(lng) => i18n.changeLanguage(lng)} />
|
|
35
|
+
|
|
36
|
+
<h1>{t('WelcomeToReact')}</h1>
|
|
37
|
+
)
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Available exports
|
|
43
|
+
-----------------
|
|
44
|
+
|
|
45
|
+
- `LanguagePicker` — main component
|
|
46
|
+
- `defaultTheme` — default theme class names (Tailwind-friendly)
|
|
47
|
+
- Types: `LanguagePickerProperties`, `LanguagePickerTheme`
|
|
48
|
+
|
|
49
|
+
Props / Options
|
|
50
|
+
---------------
|
|
51
|
+
|
|
52
|
+
The component accepts a `LanguagePickerProperties` object with these fields:
|
|
53
|
+
|
|
54
|
+
- `languages?: string[]` — array of language tags (e.g. `['en','de','fr']`). Required for rendering; if empty the component returns `null`.
|
|
55
|
+
- `defaultLanguage?: string` — initial selected language (default: `en`).
|
|
56
|
+
- `languageChanged?: (lng: string) => void` — callback invoked when user selects a language.
|
|
57
|
+
- `classNames?: string` — additional class names applied to the root container.
|
|
58
|
+
- `useAbbreviations?: boolean` — when true, display language codes (`en`) instead of localized names.
|
|
59
|
+
- `showFlags?: boolean` — when true, shows flag icons next to languages (default: `true`).
|
|
60
|
+
- `showEnglishNames?: boolean` — when true, display language names in English rather than the selected locale.
|
|
61
|
+
- `theme?: LanguagePickerTheme` — override default classes for styling. See below.
|
|
62
|
+
|
|
63
|
+
Theme
|
|
64
|
+
-----
|
|
65
|
+
|
|
66
|
+
`LanguagePickerTheme` contains these optional string fields (class names are appended directly, so Tailwind or plain CSS works):
|
|
67
|
+
|
|
68
|
+
- `container` — wrapper container classes (default: `inline-block relative`).
|
|
69
|
+
- `button` — classes for the toggle button (default includes rounded border, padding, and layout).
|
|
70
|
+
- `list` — classes for the dropdown list (default includes absolute positioning, border, max-height and scrolling behavior).
|
|
71
|
+
- `item` — classes for each list item (hover/focus state classes recommended).
|
|
72
|
+
- `selectedItem` — classes applied to the selected list item.
|
|
73
|
+
|
|
74
|
+
Accessibility
|
|
75
|
+
-------------
|
|
76
|
+
|
|
77
|
+
The component uses ARIA roles (`listbox` / `option`) and keyboard navigation (ArrowUp/ArrowDown, Enter/Space to select). When the list is closed focus returns to the toggle button.
|
|
78
|
+
|
|
79
|
+
Notes
|
|
80
|
+
-----
|
|
81
|
+
|
|
82
|
+
- The library externals `react` and `react-dom` to avoid bundling React into your app. Ensure those are installed in your host project.
|
|
83
83
|
- Flag icons come from the `country-flag-icons` package — include it as a dependency in your project (this package already lists it as a dependency).
|
package/package.json
CHANGED
|
@@ -1,59 +1,59 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "react-language-combobox",
|
|
3
|
-
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
5
|
-
"type": "module",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"dev": "vite",
|
|
8
|
-
"build": "tsc -b && vite build",
|
|
9
|
-
"build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.types.json",
|
|
10
|
-
"lint": "eslint .",
|
|
11
|
-
"preview": "vite preview"
|
|
12
|
-
},
|
|
13
|
-
"dependencies": {
|
|
14
|
-
"@tailwindcss/vite": "^4.2.2",
|
|
15
|
-
"country-flag-icons": "^1.6.15",
|
|
16
|
-
"i18next": "^25.8.20",
|
|
17
|
-
"i18next-browser-languagedetector": "^8.2.1",
|
|
18
|
-
"i18next-http-backend": "^3.0.2",
|
|
19
|
-
"react": "^19.2.4",
|
|
20
|
-
"react-dom": "^19.2.4",
|
|
21
|
-
"react-i18next": "^16.5.8",
|
|
22
|
-
"tailwindcss": "^4.2.2"
|
|
23
|
-
},
|
|
24
|
-
"devDependencies": {
|
|
25
|
-
"@eslint/js": "^9.39.4",
|
|
26
|
-
"@types/node": "^24.12.0",
|
|
27
|
-
"@types/react": "^19.2.14",
|
|
28
|
-
"@types/react-dom": "^19.2.3",
|
|
29
|
-
"@vitejs/plugin-react": "^6.0.1",
|
|
30
|
-
"eslint": "^9.39.4",
|
|
31
|
-
"eslint-plugin-react-hooks": "^7.0.1",
|
|
32
|
-
"eslint-plugin-react-refresh": "^0.5.2",
|
|
33
|
-
"globals": "^17.4.0",
|
|
34
|
-
"typescript": "~5.9.3",
|
|
35
|
-
"typescript-eslint": "^8.57.0",
|
|
36
|
-
"vite": "^8.0.1"
|
|
37
|
-
},
|
|
38
|
-
"description": "React language picker component (library build).",
|
|
39
|
-
"main": "dist/
|
|
40
|
-
"module": "dist/react-language-combobox.es.js",
|
|
41
|
-
"types": "dist/types/index.d.ts",
|
|
42
|
-
"files": [
|
|
43
|
-
"dist"
|
|
44
|
-
],
|
|
45
|
-
"repository": {
|
|
46
|
-
"type": "git",
|
|
47
|
-
"url": "git+https://github.com/ms-sk/react-language-combobox.git"
|
|
48
|
-
},
|
|
49
|
-
"keywords": [],
|
|
50
|
-
"author": "",
|
|
51
|
-
"license": "ISC",
|
|
52
|
-
"bugs": {
|
|
53
|
-
"url": "https://github.com/ms-sk/react-language-combobo/issues"
|
|
54
|
-
},
|
|
55
|
-
"homepage": "https://github.com/ms-sk/react-language-combobox#readme",
|
|
56
|
-
"publishConfig": {
|
|
57
|
-
"access": "public"
|
|
58
|
-
}
|
|
59
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "react-language-combobox",
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "1.0.2",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "tsc -b && vite build",
|
|
9
|
+
"build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.types.json",
|
|
10
|
+
"lint": "eslint .",
|
|
11
|
+
"preview": "vite preview"
|
|
12
|
+
},
|
|
13
|
+
"dependencies": {
|
|
14
|
+
"@tailwindcss/vite": "^4.2.2",
|
|
15
|
+
"country-flag-icons": "^1.6.15",
|
|
16
|
+
"i18next": "^25.8.20",
|
|
17
|
+
"i18next-browser-languagedetector": "^8.2.1",
|
|
18
|
+
"i18next-http-backend": "^3.0.2",
|
|
19
|
+
"react": "^19.2.4",
|
|
20
|
+
"react-dom": "^19.2.4",
|
|
21
|
+
"react-i18next": "^16.5.8",
|
|
22
|
+
"tailwindcss": "^4.2.2"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"@eslint/js": "^9.39.4",
|
|
26
|
+
"@types/node": "^24.12.0",
|
|
27
|
+
"@types/react": "^19.2.14",
|
|
28
|
+
"@types/react-dom": "^19.2.3",
|
|
29
|
+
"@vitejs/plugin-react": "^6.0.1",
|
|
30
|
+
"eslint": "^9.39.4",
|
|
31
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
32
|
+
"eslint-plugin-react-refresh": "^0.5.2",
|
|
33
|
+
"globals": "^17.4.0",
|
|
34
|
+
"typescript": "~5.9.3",
|
|
35
|
+
"typescript-eslint": "^8.57.0",
|
|
36
|
+
"vite": "^8.0.1"
|
|
37
|
+
},
|
|
38
|
+
"description": "React language picker component (library build).",
|
|
39
|
+
"main": "dist/react-language-combobox.cjs.js",
|
|
40
|
+
"module": "dist/react-language-combobox.es.js",
|
|
41
|
+
"types": "dist/types/index.d.ts",
|
|
42
|
+
"files": [
|
|
43
|
+
"dist"
|
|
44
|
+
],
|
|
45
|
+
"repository": {
|
|
46
|
+
"type": "git",
|
|
47
|
+
"url": "git+https://github.com/ms-sk/react-language-combobox.git"
|
|
48
|
+
},
|
|
49
|
+
"keywords": [],
|
|
50
|
+
"author": "",
|
|
51
|
+
"license": "ISC",
|
|
52
|
+
"bugs": {
|
|
53
|
+
"url": "https://github.com/ms-sk/react-language-combobo/issues"
|
|
54
|
+
},
|
|
55
|
+
"homepage": "https://github.com/ms-sk/react-language-combobox#readme",
|
|
56
|
+
"publishConfig": {
|
|
57
|
+
"access": "public"
|
|
58
|
+
}
|
|
59
|
+
}
|