next-language-selector 0.1.1

package/README.md

@@ -0,0 +1,16 @@
+# next-language-selector
+
+A lightweight, configurable language selector for Next.js (App Router & Pages Router).  
+Efficiently manages the `NEXT_LOCALE` cookie and works seamlessly with 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, Radix, etc.).
+
+## Installation
+
+```bash
+pnpm add next-language-selector
+# or
+npm install next-language-selector

package/dist/index.cjs

@@ -0,0 +1,113 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  LanguageSelector: () => LanguageSelector,
+  setLocaleCookie: () => setLocaleCookie
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/selector.tsx
+var import_react = require("react");
+
+// src/utils.ts
+var setLocaleCookie = (locale, cookieName = "NEXT_LOCALE") => {
+  if (typeof document === "undefined") return;
+  document.cookie = `${cookieName}=${locale}; max-age=31536000; path=/`;
+  window.location.reload();
+};
+
+// src/selector.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LanguageSelector = ({
+  locales,
+  defaultLocale,
+  cookieName = "NEXT_LOCALE",
+  isDropdown = true,
+  renderCustom,
+  className,
+  activeColor = "red"
+}) => {
+  const [current, setCurrent] = (0, import_react.useState)(defaultLocale);
+  (0, import_react.useEffect)(() => {
+    const saved = document.cookie.split("; ").find((row) => row.startsWith(`${cookieName}=`))?.split("=")[1];
+    if (saved) setCurrent(saved);
+  }, [cookieName]);
+  const handleSelect = (code) => {
+    setCurrent(code);
+    setLocaleCookie(code, cookieName);
+  };
+  if (renderCustom) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderCustom({
+      locales,
+      currentLocale: current,
+      onChange: handleSelect
+    }) });
+  }
+  if (!isDropdown) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: { display: "flex", gap: "8px", alignItems: "center" },
+        className,
+        children: locales.map((l) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            onClick: () => handleSelect(l.code),
+            style: {
+              cursor: "pointer",
+              background: "none",
+              border: "none",
+              borderBottom: current === l.code ? `1px solid ${activeColor}` : "1px solid transparent",
+              color: current === l.code ? "inherit" : "gray",
+              fontSize: "12px",
+              padding: "2px 4px"
+            },
+            children: [
+              l.flag,
+              " ",
+              l.name
+            ]
+          },
+          l.code
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "select",
+    {
+      value: current,
+      onChange: (e) => handleSelect(e.target.value),
+      className,
+      children: locales.map((l) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("option", { value: l.code, children: [
+        l.flag,
+        " ",
+        l.name
+      ] }, l.code))
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LanguageSelector,
+  setLocaleCookie
+});

package/dist/index.d.mts

@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react';
+
+interface LocaleConfig {
+    name: string;
+    code: string;
+    flag?: string;
+}
+interface LanguageSelectorProps {
+    locales: LocaleConfig[];
+    defaultLocale: string;
+    isDropdown: boolean;
+    cookieName?: string;
+    activeColor?: string;
+    className?: string;
+    renderCustom?: (props: {
+        locales: LocaleConfig[];
+        currentLocale: string;
+        onChange: (code: string) => void;
+    }) => ReactNode;
+}
+
+declare const LanguageSelector: ({ locales, defaultLocale, cookieName, isDropdown, renderCustom, className, activeColor, }: LanguageSelectorProps) => React.JSX.Element;
+
+declare const setLocaleCookie: (locale: string, cookieName?: string) => void;
+
+export { LanguageSelector, type LanguageSelectorProps, type LocaleConfig, setLocaleCookie };

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react';
+
+interface LocaleConfig {
+    name: string;
+    code: string;
+    flag?: string;
+}
+interface LanguageSelectorProps {
+    locales: LocaleConfig[];
+    defaultLocale: string;
+    isDropdown: boolean;
+    cookieName?: string;
+    activeColor?: string;
+    className?: string;
+    renderCustom?: (props: {
+        locales: LocaleConfig[];
+        currentLocale: string;
+        onChange: (code: string) => void;
+    }) => ReactNode;
+}
+
+declare const LanguageSelector: ({ locales, defaultLocale, cookieName, isDropdown, renderCustom, className, activeColor, }: LanguageSelectorProps) => React.JSX.Element;
+
+declare const setLocaleCookie: (locale: string, cookieName?: string) => void;
+
+export { LanguageSelector, type LanguageSelectorProps, type LocaleConfig, setLocaleCookie };

package/dist/index.mjs

@@ -0,0 +1,85 @@
+// src/selector.tsx
+import { useEffect, useState } from "react";
+
+// src/utils.ts
+var setLocaleCookie = (locale, cookieName = "NEXT_LOCALE") => {
+  if (typeof document === "undefined") return;
+  document.cookie = `${cookieName}=${locale}; max-age=31536000; path=/`;
+  window.location.reload();
+};
+
+// src/selector.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var LanguageSelector = ({
+  locales,
+  defaultLocale,
+  cookieName = "NEXT_LOCALE",
+  isDropdown = true,
+  renderCustom,
+  className,
+  activeColor = "red"
+}) => {
+  const [current, setCurrent] = useState(defaultLocale);
+  useEffect(() => {
+    const saved = document.cookie.split("; ").find((row) => row.startsWith(`${cookieName}=`))?.split("=")[1];
+    if (saved) setCurrent(saved);
+  }, [cookieName]);
+  const handleSelect = (code) => {
+    setCurrent(code);
+    setLocaleCookie(code, cookieName);
+  };
+  if (renderCustom) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderCustom({
+      locales,
+      currentLocale: current,
+      onChange: handleSelect
+    }) });
+  }
+  if (!isDropdown) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { display: "flex", gap: "8px", alignItems: "center" },
+        className,
+        children: locales.map((l) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => handleSelect(l.code),
+            style: {
+              cursor: "pointer",
+              background: "none",
+              border: "none",
+              borderBottom: current === l.code ? `1px solid ${activeColor}` : "1px solid transparent",
+              color: current === l.code ? "inherit" : "gray",
+              fontSize: "12px",
+              padding: "2px 4px"
+            },
+            children: [
+              l.flag,
+              " ",
+              l.name
+            ]
+          },
+          l.code
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      value: current,
+      onChange: (e) => handleSelect(e.target.value),
+      className,
+      children: locales.map((l) => /* @__PURE__ */ jsxs("option", { value: l.code, children: [
+        l.flag,
+        " ",
+        l.name
+      ] }, l.code))
+    }
+  );
+};
+export {
+  LanguageSelector,
+  setLocaleCookie
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "next-language-selector",
+  "version": "0.1.1",
+  "description": "Configurable language selector for Next.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "next": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "keywords": [
+    "next.js",
+    "i18n",
+    "language-selector",
+    "internationalization",
+    "react",
+    "cookie-based-i18n",
+    "app-router"
+  ],
+  "author": "Kirilinsky (https://github.com/kirilinsky)",
+  "license": "MIT",
+  "homepage": "https://github.com/kirilinsky/next-language-selector#readme",
+  "bugs": {
+    "url": "https://github.com/kirilinsky/next-language-selector/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kirilinsky/next-language-selector.git"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "tslib": "^2.8.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}