react-language-combobox 1.0.0 → 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.
Files changed (2) hide show
  1. package/README.md +83 -73
  2. package/package.json +59 -58
package/README.md CHANGED
@@ -1,73 +1,83 @@
1
- # React + TypeScript + Vite
2
-
3
- This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4
-
5
- Currently, two official plugins are available:
6
-
7
- - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
8
- - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
9
-
10
- ## React Compiler
11
-
12
- The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
13
-
14
- ## Expanding the ESLint configuration
15
-
16
- If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
17
-
18
- ```js
19
- export default defineConfig([
20
- globalIgnores(['dist']),
21
- {
22
- files: ['**/*.{ts,tsx}'],
23
- extends: [
24
- // Other configs...
25
-
26
- // Remove tseslint.configs.recommended and replace with this
27
- tseslint.configs.recommendedTypeChecked,
28
- // Alternatively, use this for stricter rules
29
- tseslint.configs.strictTypeChecked,
30
- // Optionally, add this for stylistic rules
31
- tseslint.configs.stylisticTypeChecked,
32
-
33
- // Other configs...
34
- ],
35
- languageOptions: {
36
- parserOptions: {
37
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
38
- tsconfigRootDir: import.meta.dirname,
39
- },
40
- // other options...
41
- },
42
- },
43
- ])
44
- ```
45
-
46
- You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
47
-
48
- ```js
49
- // eslint.config.js
50
- import reactX from 'eslint-plugin-react-x'
51
- import reactDom from 'eslint-plugin-react-dom'
52
-
53
- export default defineConfig([
54
- globalIgnores(['dist']),
55
- {
56
- files: ['**/*.{ts,tsx}'],
57
- extends: [
58
- // Other configs...
59
- // Enable lint rules for React
60
- reactX.configs['recommended-typescript'],
61
- // Enable lint rules for React DOM
62
- reactDom.configs.recommended,
63
- ],
64
- languageOptions: {
65
- parserOptions: {
66
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
67
- tsconfigRootDir: import.meta.dirname,
68
- },
69
- // other options...
70
- },
71
- },
72
- ])
73
- ```
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
+ - 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,58 +1,59 @@
1
- {
2
- "name": "react-language-combobox",
3
- "private": false,
4
- "version": "1.0.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/rreact-language-combobox.cjs.js",
40
- "module": "dist/react-language-combobox.es.js",
41
- "types": "dist/types/index.d.ts",
42
- "files": ["dist"],
43
- "repository": {
44
- "type": "git",
45
- "url": "git+https://github.com/ms-sk/react-language-combobox.git"
46
- },
47
- "keywords": [],
48
- "author": "",
49
- "license": "ISC",
50
- "bugs": {
51
- "url": "https://github.com/ms-sk/react-language-combobo/issues"
52
- },
53
- "homepage": "https://github.com/ms-sk/react-language-combobox#readme"
54
- ,
55
- "publishConfig": {
56
- "access": "public"
57
- }
58
- }
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
+ }