next-language-selector 0.2.7 → 0.3.0

package/README.md

@@ -5,15 +5,16 @@
 ![security score](https://socket.dev/api/badge/npm/package/next-language-selector?style=flat-square)
 ![license](https://img.shields.io/npm/l/next-language-selector?color=gray&style=flat-square)
 
-A lightweight, configurable language selector for Next.js (App Router & Pages Router).  
-Efficiently manages the `NEXT_LOCALE` cookie and works seamlessly with `next-intl` or any other i18n solution.
+A lightweight, unstyled language selector for Next.js (App Router & Pages Router).  
+Manages the `NEXT_LOCALE` cookie and works with `next-intl` or any i18n solution.
 
 ## Key Features
 
-- 🚀 **Next.js Native**: Built specifically for the Next.js ecosystem.
-- 🪶 **Zero Dependencies**: Keeps your bundle size minimal.
-- 🎨 **Fully Customizable**: Use built-in styles or your own UI (Shadcn UI, Radix, etc.) via render props.
-- 🍪 **Cookie-based**: Automatically syncs with the `NEXT_LOCALE` cookie.
+- **Next.js Native**: Built for the Next.js ecosystem (App Router & Pages Router).
+- **Zero Dependencies**: No runtime deps — just React.
+- **Unstyled by default**: Bring your own CSS, Tailwind, Shadcn, Radix — no style conflicts.
+- **Cookie-based**: Reads and writes `NEXT_LOCALE` automatically.
+- **Secure**: Cookie injection-safe, `SameSite=Lax` out of the box.
 
 ## Installation
 
@@ -25,7 +26,7 @@ npm install next-language-selector
 
 ## Basic Usage
 
-Just drop the component into your Footer or Navbar. It handles cookie updates and local state out of the box.
+Drop the component into your Footer or Navbar. It handles cookie sync and state out of the box.
 
 ```tsx
 import { LanguageSelector } from "next-language-selector";
@@ -41,17 +42,55 @@ export default function Footer() {
       <LanguageSelector
         locales={locales}
         defaultLocale="en"
-        activeColor="#3b82f6" // optional
-        isDropdown={false} // Renders as a list of buttons
       />
     </footer>
   );
 }
 ```
 
-## Custom UI (e.g., Shadcn UI / Headless)
+## Styling
 
-Use the `renderCustom` prop to take full control over the rendering while keeping the cookie management logic.
+The component is **unstyled by default**. Use `className` / `itemClassName` props or target the `data-active` attribute:
+
+```css
+/* Plain CSS */
+.lang-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  opacity: 0.5;
+}
+
+.lang-btn[data-active="true"] {
+  opacity: 1;
+  font-weight: 600;
+  border-bottom: 2px solid currentColor;
+}
+```
+
+```tsx
+<LanguageSelector
+  locales={locales}
+  defaultLocale="en"
+  className="flex gap-2"
+  itemClassName="lang-btn"
+/>
+```
+
+With Tailwind:
+
+```tsx
+<LanguageSelector
+  locales={locales}
+  defaultLocale="en"
+  className="flex items-center gap-3"
+  itemClassName="text-sm text-gray-400 data-[active=true]:text-black data-[active=true]:font-semibold"
+/>
+```
+
+## Custom UI
+
+Use the `renderCustom` prop to take full control over rendering while keeping the cookie logic.
 
 ```tsx
 <LanguageSelector
@@ -63,11 +102,7 @@ Use the `renderCustom` prop to take full control over the rendering while keepin
         <button
           key={lang.code}
           onClick={() => onChange(lang.code)}
-          className={
-            currentLocale === lang.code
-              ? "text-blue-600 font-bold"
-              : "text-gray-500"
-          }
+          className={currentLocale === lang.code ? "font-bold" : "opacity-50"}
         >
           {lang.flag} {lang.name}
         </button>
@@ -77,9 +112,20 @@ Use the `renderCustom` prop to take full control over the rendering while keepin
 />
 ```
 
-## Setup with next-intl (Middleware)
+## Dropdown mode
+
+```tsx
+<LanguageSelector
+  locales={locales}
+  defaultLocale="en"
+  isDropdown
+  className="border rounded px-2 py-1"
+/>
+```
+
+## Setup with next-intl
 
-To make sure Next.js detects the language from the cookie set by this component, update your `middleware.ts` or `proxy.ts`:
+Update your `middleware.ts` to read the cookie set by this component:
 
 ```typescript
 import createMiddleware from "next-intl/middleware";
@@ -90,23 +136,33 @@ export default createMiddleware({
   localeCookie: {
     name: "NEXT_LOCALE",
     path: "/",
-    maxAge: 31536000, // 1 year
+    maxAge: 31536000,
   },
 });
 ```
 
 ## Props
 
-| Prop            | Type             | Default       | Description                                                 |
-| :-------------- | :--------------- | :------------ | :---------------------------------------------------------- |
-| `locales`       | `LocaleConfig[]` | **Required**  | Array of `{ name, code, flag }` objects                     |
-| `defaultLocale` | `string`         | **Required**  | Initial language code                                       |
-| `isDropdown`    | `boolean`        | `false`       | Toggle between `<select>` and a list of buttons             |
-| `autoReload`    | `boolean`        | `true`        | Trigger reload on cookie change                             |
-| `cookieName`    | `string`         | `NEXT_LOCALE` | Name of the cookie to store the selected language           |
-| `activeColor`   | `string`         | `red`         | Underline color for the active language (non-dropdown mode) |
-| `className`     | `string`         | -             | CSS class for the wrapper element                           |
-| `renderCustom`  | `Function`       | -             | Render prop for custom UI logic                             |
+| Prop            | Type             | Default        | Description                                          |
+| :-------------- | :--------------- | :------------- | :--------------------------------------------------- |
+| `locales`       | `LocaleConfig[]` | **Required**   | Array of `{ name, code, flag? }` objects             |
+| `defaultLocale` | `string`         | **Required**   | Fallback locale code                                 |
+| `isDropdown`    | `boolean`        | `false`        | Render as `<select>` instead of buttons              |
+| `autoReload`    | `boolean`        | `true`         | Reload page after cookie change                      |
+| `cookieName`    | `string`         | `NEXT_LOCALE`  | Cookie name to store the selected locale             |
+| `className`     | `string`         | -              | CSS class for the wrapper `<div>` or `<select>`      |
+| `itemClassName` | `string`         | -              | CSS class for each `<button>` or `<option>`          |
+| `renderCustom`  | `Function`       | -              | Render prop for fully custom UI                      |
+
+### `LocaleConfig`
+
+```ts
+interface LocaleConfig {
+  name: string;   // Display name, e.g. "English"
+  code: string;   // Locale code, e.g. "en"
+  flag?: string;  // Optional emoji flag, e.g. "🇺🇸"
+}
+```
 
 ## License
 

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";var u=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var v=(t,o)=>{for(var a in o)u(t,a,{get:o[a],enumerable:!0})},E=(t,o,a,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of k(o))!y.call(t,n)&&n!==a&&u(t,n,{get:()=>o[n],enumerable:!(c=x(o,n))||c.enumerable});return t};var b=t=>E(u({},"__esModule",{value:!0}),t);var N={};v(N,{LanguageSelector:()=>h,setLocaleCookie:()=>i});module.exports=b(N);var p=require("react");var i=(t,o="NEXT_LOCALE",a=!0)=>{typeof document>"u"||(document.cookie=`${o}=${t}; max-age=31536000; path=/`,a&&window.location.reload())};var r=require("react/jsx-runtime");function f(t){let{locales:o,defaultLocale:a,cookieName:c="NEXT_LOCALE",isDropdown:n=!1,autoReload:L=!0,renderCustom:g,className:m,activeColor:C="red"}=t,[s,d]=(0,p.useState)(a);(0,p.useEffect)(()=>{let e=document.cookie.split("; ").find(S=>S.startsWith(`${c}=`))?.split("=")[1];e&&d(e)},[c]);let l=e=>{d(e),i(e,c,L)};return g?(0,r.jsx)(r.Fragment,{children:g({locales:o,currentLocale:s,onChange:l})}):n?(0,r.jsx)("select",{value:s,onChange:e=>l(e.target.value),className:m,children:o.map(e=>(0,r.jsxs)("option",{value:e.code,children:[e.flag," ",e.name]},e.code))}):(0,r.jsx)("div",{style:{display:"flex",gap:"8px",alignItems:"center"},className:m,children:o.map(e=>(0,r.jsxs)("button",{onClick:()=>l(e.code),style:{cursor:"pointer",background:"none",border:"none",borderBottom:s===e.code?`1px solid ${C}`:"1px solid transparent",color:s===e.code?"inherit":"gray",fontSize:"12px",padding:"2px 4px"},children:[e.flag," ",e.name]},e.code))})}var h=f;0&&(module.exports={LanguageSelector,setLocaleCookie});
+"use strict";var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var h=(t,o)=>{for(var r in o)m(t,r,{get:o[r],enumerable:!0})},P=(t,o,r,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of E(o))!x.call(t,n)&&n!==r&&m(t,n,{get:()=>o[n],enumerable:!(a=v(o,n))||a.enumerable});return t};var b=t=>P(m({},"__esModule",{value:!0}),t);var I={};h(I,{LanguageSelector:()=>w,setLocaleCookie:()=>i});module.exports=b(I);var s=require("react");var i=(t,o="NEXT_LOCALE",r=!0)=>{if(typeof document>"u")return;let a=encodeURIComponent(o),n=encodeURIComponent(t);document.cookie=`${a}=${n}; max-age=31536000; path=/; SameSite=Lax`,r&&window.location.reload()};var c=require("react/jsx-runtime");function k(t){let{locales:o,defaultLocale:r,cookieName:a="NEXT_LOCALE",isDropdown:n=!1,autoReload:p=!0,renderCustom:d,className:f,itemClassName:g}=t,[N,R]=(0,s.useState)(!1),[l,L]=(0,s.useState)(r);(0,s.useEffect)(()=>{let e=encodeURIComponent(a),C=document.cookie.split("; ").find(y=>y.startsWith(`${e}=`)),S=C?decodeURIComponent(C.split("=").slice(1).join("=")):null;S&&L(S),R(!0)},[a]);let u=(0,s.useCallback)(e=>{L(e),i(e,a,p)},[a,p]);return N?d?(0,c.jsx)(c.Fragment,{children:d({locales:o,currentLocale:l,onChange:u})}):n?(0,c.jsx)("select",{value:l,onChange:e=>u(e.target.value),className:f,children:o.map(e=>(0,c.jsxs)("option",{value:e.code,className:g,children:[e.flag," ",e.name]},e.code))}):(0,c.jsx)("div",{className:f,children:o.map(e=>(0,c.jsxs)("button",{onClick:()=>u(e.code),"data-active":l===e.code,"aria-pressed":l===e.code,className:g,children:[e.flag," ",e.name]},e.code))}):null}var w=k;0&&(module.exports={LanguageSelector,setLocaleCookie});

package/dist/index.d.mts

@@ -12,8 +12,8 @@ interface LanguageSelectorProps {
     defaultLocale: string;
     isDropdown?: boolean;
     cookieName?: string;
-    activeColor?: string;
     className?: string;
+    itemClassName?: string;
     autoReload?: boolean;
     renderCustom?: (props: {
         locales: LocaleConfig[];
@@ -22,6 +22,6 @@ interface LanguageSelectorProps {
     }) => ReactNode;
 }
 
-declare const LanguageSelector: (props: LanguageSelectorProps) => React.JSX.Element;
+declare const LanguageSelector: (props: LanguageSelectorProps) => React.JSX.Element | null;
 
 export { LanguageSelector, type LanguageSelectorProps, type LocaleConfig, setLocaleCookie };

package/dist/index.d.ts

@@ -12,8 +12,8 @@ interface LanguageSelectorProps {
     defaultLocale: string;
     isDropdown?: boolean;
     cookieName?: string;
-    activeColor?: string;
     className?: string;
+    itemClassName?: string;
     autoReload?: boolean;
     renderCustom?: (props: {
         locales: LocaleConfig[];
@@ -22,6 +22,6 @@ interface LanguageSelectorProps {
     }) => ReactNode;
 }
 
-declare const LanguageSelector: (props: LanguageSelectorProps) => React.JSX.Element;
+declare const LanguageSelector: (props: LanguageSelectorProps) => React.JSX.Element | null;
 
 export { LanguageSelector, type LanguageSelectorProps, type LocaleConfig, setLocaleCookie };

package/dist/index.mjs

@@ -1 +1 @@
-import{useEffect as S,useState as x}from"react";var s=(r,o="NEXT_LOCALE",a=!0)=>{typeof document>"u"||(document.cookie=`${o}=${r}; max-age=31536000; path=/`,a&&window.location.reload())};import{Fragment as k,jsx as i,jsxs as g}from"react/jsx-runtime";function m(r){let{locales:o,defaultLocale:a,cookieName:n="NEXT_LOCALE",isDropdown:d=!1,autoReload:f=!0,renderCustom:p,className:l,activeColor:L="red"}=r,[t,u]=x(a);S(()=>{let e=document.cookie.split("; ").find(C=>C.startsWith(`${n}=`))?.split("=")[1];e&&u(e)},[n]);let c=e=>{u(e),s(e,n,f)};return p?i(k,{children:p({locales:o,currentLocale:t,onChange:c})}):d?i("select",{value:t,onChange:e=>c(e.target.value),className:l,children:o.map(e=>g("option",{value:e.code,children:[e.flag," ",e.name]},e.code))}):i("div",{style:{display:"flex",gap:"8px",alignItems:"center"},className:l,children:o.map(e=>g("button",{onClick:()=>c(e.code),style:{cursor:"pointer",background:"none",border:"none",borderBottom:t===e.code?`1px solid ${L}`:"1px solid transparent",color:t===e.code?"inherit":"gray",fontSize:"12px",padding:"2px 4px"},children:[e.flag," ",e.name]},e.code))})}var X=m;export{X as LanguageSelector,s as setLocaleCookie};
+import{useCallback as v,useEffect as E,useState as C}from"react";var l=(n,t="NEXT_LOCALE",c=!0)=>{if(typeof document>"u")return;let o=encodeURIComponent(t),r=encodeURIComponent(n);document.cookie=`${o}=${r}; max-age=31536000; path=/; SameSite=Lax`,c&&window.location.reload()};import{Fragment as x,jsx as i,jsxs as S}from"react/jsx-runtime";function k(n){let{locales:t,defaultLocale:c,cookieName:o="NEXT_LOCALE",isDropdown:r=!1,autoReload:u=!0,renderCustom:m,className:p,itemClassName:d}=n,[N,R]=C(!1),[a,f]=C(c);E(()=>{let e=encodeURIComponent(o),g=document.cookie.split("; ").find(y=>y.startsWith(`${e}=`)),L=g?decodeURIComponent(g.split("=").slice(1).join("=")):null;L&&f(L),R(!0)},[o]);let s=v(e=>{f(e),l(e,o,u)},[o,u]);return N?m?i(x,{children:m({locales:t,currentLocale:a,onChange:s})}):r?i("select",{value:a,onChange:e=>s(e.target.value),className:p,children:t.map(e=>S("option",{value:e.code,className:d,children:[e.flag," ",e.name]},e.code))}):i("div",{className:p,children:t.map(e=>S("button",{onClick:()=>s(e.code),"data-active":a===e.code,"aria-pressed":a===e.code,className:d,children:[e.flag," ",e.name]},e.code))}):null}var A=k;export{A as LanguageSelector,l as setLocaleCookie};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-language-selector",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "Configurable language selector for Next.js",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -10,23 +10,21 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
-    },
-    "./selector": {
-      "types": "./dist/selector.d.ts",
-      "import": "./dist/selector.mjs",
-      "require": "./dist/selector.cjs"
     }
   },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
-    "lint": "tsc --noEmit"
+    "lint": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "npx vitest run --coverage"
   },
   "files": [
     "dist"
   ],
   "peerDependencies": {
-    "next": "^13.5.11 || ^14.0.0 || ^15.0.0 || ^16.0.0",
+    "next": "^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "keywords": [
@@ -50,10 +48,16 @@
     "url": "git+https://github.com/kirilinsky/next-language-selector.git"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.14",
+    "@vitest/coverage-v8": "^4.1.2",
+    "happy-dom": "^20.8.9",
     "tslib": "^2.8.1",
     "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.2"
   },
   "sideEffects": false
 }