next-language-selector 0.1.8 β 0.2.0
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 +94 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,16 +1,107 @@
|
|
|
1
1
|
# next-language-selector
|
|
2
2
|
|
|
3
3
|
A lightweight, configurable language selector for Next.js (App Router & Pages Router).
|
|
4
|
-
Efficiently manages the `NEXT_LOCALE` cookie and works seamlessly with any i18n solution.
|
|
4
|
+
Efficiently manages the `NEXT_LOCALE` cookie and works seamlessly with `next-intl` or any other i18n solution.
|
|
5
5
|
|
|
6
6
|
## Key Features
|
|
7
|
+
|
|
7
8
|
- π **Next.js Native**: Built specifically for the Next.js ecosystem.
|
|
8
9
|
- πͺΆ **Zero Dependencies**: Keeps your bundle size minimal.
|
|
9
|
-
- π¨ **Fully Customizable**: Use built-in styles or your own UI (Shadcn, Radix, etc.).
|
|
10
|
+
- π¨ **Fully Customizable**: Use built-in styles or your own UI (Shadcn UI, Radix, etc.) via render props.
|
|
11
|
+
- πͺ **Cookie-based**: Automatically syncs with the `NEXT_LOCALE` cookie.
|
|
10
12
|
|
|
11
13
|
## Installation
|
|
12
14
|
|
|
13
15
|
```bash
|
|
14
16
|
pnpm add next-language-selector
|
|
15
17
|
# or
|
|
16
|
-
npm install next-language-selector
|
|
18
|
+
npm install next-language-selector
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Basic Usage
|
|
22
|
+
|
|
23
|
+
Just drop the component into your Footer or Navbar. It handles cookie updates and local state out of the box.
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { LanguageSelector } from "next-language-selector";
|
|
27
|
+
|
|
28
|
+
const locales = [
|
|
29
|
+
{ name: "English", code: "en", flag: "πΊπΈ" },
|
|
30
|
+
{ name: "Deutsch", code: "de", flag: "π©πͺ" },
|
|
31
|
+
];
|
|
32
|
+
|
|
33
|
+
export default function Footer() {
|
|
34
|
+
return (
|
|
35
|
+
<footer>
|
|
36
|
+
<LanguageSelector
|
|
37
|
+
locales={locales}
|
|
38
|
+
defaultLocale="en"
|
|
39
|
+
activeColor="#3b82f6"
|
|
40
|
+
isDropdown={false} // Renders as a list of buttons
|
|
41
|
+
/>
|
|
42
|
+
</footer>
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Custom UI (e.g., Shadcn UI / Headless)
|
|
48
|
+
|
|
49
|
+
Use the `renderCustom` prop to take full control over the rendering while keeping the cookie management logic.
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
<LanguageSelector
|
|
53
|
+
locales={locales}
|
|
54
|
+
defaultLocale="en"
|
|
55
|
+
renderCustom={({ locales, currentLocale, onChange }) => (
|
|
56
|
+
<div className="flex gap-4">
|
|
57
|
+
{locales.map((lang) => (
|
|
58
|
+
<button
|
|
59
|
+
key={lang.code}
|
|
60
|
+
onClick={() => onChange(lang.code)}
|
|
61
|
+
className={
|
|
62
|
+
currentLocale === lang.code
|
|
63
|
+
? "text-blue-600 font-bold"
|
|
64
|
+
: "text-gray-500"
|
|
65
|
+
}
|
|
66
|
+
>
|
|
67
|
+
{lang.flag} {lang.name}
|
|
68
|
+
</button>
|
|
69
|
+
))}
|
|
70
|
+
</div>
|
|
71
|
+
)}
|
|
72
|
+
/>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Setup with next-intl (Middleware)
|
|
76
|
+
|
|
77
|
+
To make sure Next.js detects the language from the cookie set by this component, update your `middleware.ts` or `proxy.ts`:
|
|
78
|
+
|
|
79
|
+
```typescript
|
|
80
|
+
import createMiddleware from "next-intl/middleware";
|
|
81
|
+
import { routing } from "./i18n/routing";
|
|
82
|
+
|
|
83
|
+
export default createMiddleware({
|
|
84
|
+
...routing,
|
|
85
|
+
localeCookie: {
|
|
86
|
+
name: "NEXT_LOCALE",
|
|
87
|
+
path: "/",
|
|
88
|
+
maxAge: 31536000, // 1 year
|
|
89
|
+
},
|
|
90
|
+
});
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## Props
|
|
94
|
+
|
|
95
|
+
| Prop | Type | Default | Description |
|
|
96
|
+
| :-------------- | :--------------- | :------------ | :---------------------------------------------------------- |
|
|
97
|
+
| `locales` | `LocaleConfig[]` | **Required** | Array of `{ name, code, flag }` objects |
|
|
98
|
+
| `defaultLocale` | `string` | **Required** | Initial language code |
|
|
99
|
+
| `isDropdown` | `boolean` | `true` | Toggle between `<select>` and a list of buttons |
|
|
100
|
+
| `cookieName` | `string` | `NEXT_LOCALE` | Name of the cookie to store the selected language |
|
|
101
|
+
| `activeColor` | `string` | `red` | Underline color for the active language (non-dropdown mode) |
|
|
102
|
+
| `className` | `string` | - | CSS class for the wrapper element |
|
|
103
|
+
| `renderCustom` | `Function` | - | Render prop for custom UI logic |
|
|
104
|
+
|
|
105
|
+
## License
|
|
106
|
+
|
|
107
|
+
MIT
|