@aixyte/aixster

v4.2.5

Published

2 months ago

React translation library with automatic routing, real-time AI translation, and zero-flash rendering. One-line language routing setup.

0High
0Medium
0Low

aixyte

react translation i18n internationalization localization weglot-alternative wpml-alternative react-router language-router automatic-routing lovable vibe-coded

@aixyte/aixster

Seamless website translation for React and Next.js applications with zero-flash rendering and automatic language routing.

Installation

npm install @aixyte/aixster react-router-dom

Quick Start

Option 1: Path Mode (Recommended - Automatic Language URLs)

One-line setup that automatically handles language routing like /en/pricing, /fr/pricing, /de/pricing:

import { LangRouter, AixsterProvider } from '@aixyte/aixster';
import { Routes, Route } from 'react-router-dom';
import { useRef } from 'react';

function App() {
  const navigateRef = useRef();

  return (
    <LangRouter defaultLang="en" langs={['en', 'fr', 'de', 'es']} navigateRef={navigateRef}>
      <AixsterProvider
        apiKey="aix_your_api_key"
        defaultLocale="en"
        locales={['en', 'fr', 'de', 'es']}
        routing="path"
        navigateRef={navigateRef}
      >
        <Routes>
          {/* No language prefix needed! */}
          <Route path="/" element={<Home />} />
          <Route path="home" element={<Home />} />
          <Route path="pricing" element={<Pricing />} />
          <Route path="about" element={<About />} />
        </Routes>
      </AixsterProvider>
    </LangRouter>
  );
}

Important: Pass the same navigateRef to both <LangRouter> and <AixsterProvider> for proper URL synchronization.

URLs automatically work as:

/en/, /en/home, /en/pricing, /en/about
/fr/, /fr/home, /fr/pricing, /fr/about
/de/, /de/home, /de/pricing, /de/about

Option 2: Query Mode (Simple - Query Parameters)

Use query parameters like /pricing?t=fr:

import { AixsterProvider } from '@aixyte/aixster';
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <AixsterProvider
        apiKey="aix_your_api_key"
        defaultLocale="en"
        locales={['en', 'de', 'fr', 'es']}
        routing="query"
      >
        <YourApp />
      </AixsterProvider>
    </BrowserRouter>
  );
}

Next.js

// app/layout.tsx
import { AixsterProvider } from '@aixyte/aixster';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AixsterProvider
          apiKey="aix_your_api_key"
          defaultLocale="en"
          locales={['en', 'de', 'fr', 'es']}
        >
          {children}
        </AixsterProvider>
      </body>
    </html>
  );
}

Configuration

<AixsterProvider
  apiKey="aix_xxx"                    // Required: Your Aixster API key
  defaultLocale="en"                  // Required: Source language
  locales={['en', 'de', 'fr']}        // Required: Supported languages
  apiBase="https://..."               // Optional: Custom API endpoint
  routing="query"                     // Optional: 'query' | 'path' (default: 'query')
  switcherPosition="bottom-right"     // Optional: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
  switcherOffsetY={20}                // Optional: Vertical offset in pixels
  editMode={false}                    // Optional: Enable edit mode
  editKey="KeyE"                      // Optional: Keyboard shortcut for edit mode
  mode="dom"                          // Optional: 'dom' | 'context' (default: 'dom')
  sitemap={true}                      // Optional: Auto-inject sitemap link (default: true) - NEW in v4.2.2
>
  {children}
</AixsterProvider>

Routing Modes

query (default): Language in query parameter /pricing?t=fr
- Use with standard React Router setup
- No URL structure changes needed
path: Language in URL path /fr/pricing
- Use with <LangRouter> wrapper
- Automatic language routing
- SEO-optimized URLs
- See PATH_EXAMPLES.md for detailed examples

Path Mode Helpers (v4.2+)

LangLink - Language-Aware Links

import { LangLink } from '@aixyte/aixster';

function Navigation() {
  return (
    <nav>
      {/* Automatically becomes /en/pricing or /fr/pricing */}
      <LangLink to="pricing">Pricing</LangLink>
      <LangLink to="about">About</LangLink>
    </nav>
  );
}

useLang - Get Current Language

import { useLang } from '@aixyte/aixster';

function MyComponent() {
  const lang = useLang(); // 'en', 'fr', 'de', etc.
  return <div>Current language: {lang}</div>;
}

useLangNavigate - Programmatic Navigation

import { useLangNavigate } from '@aixyte/aixster';

function MyComponent() {
  const navigate = useLangNavigate();

  const goToPricing = () => {
    navigate('pricing'); // Goes to /en/pricing or /fr/pricing automatically
  };

  return <button onClick={goToPricing}>View Pricing</button>;
}

Core Hooks

useAixster

Access locale state and switching:

import { useAixster } from '@aixyte/aixster';

function MyComponent() {
  const { locale, setLocale, isLoading, config } = useAixster();

  return (
    <button onClick={() => setLocale('de')}>
      Switch to German
    </button>
  );
}

useAixsterTranslate

Manual translation control:

import { useAixsterTranslate } from '@aixyte/aixster';

function MyComponent() {
  const { translateElement, translateDOM } = useAixsterTranslate();
  
  const handleDynamicContent = () => {
    // Translate specific element
    const el = document.getElementById('dynamic-content');
    if (el) translateElement(el);
    
    // Or translate entire DOM
    translateDOM();
  };
  
  return <button onClick={handleDynamicContent}>Load Content</button>;
}

useAixsterEdit

Edit mode for excluding elements:

import { useAixsterEdit } from '@aixyte/aixster';

function MyComponent() {
  const { editMode, toggleEditMode, excludeElement } = useAixsterEdit();
  
  return (
    <button onClick={toggleEditMode}>
      {editMode ? 'Exit Edit Mode' : 'Edit Exclusions'}
    </button>
  );
}

Features

✅ Zero-flash translations (rendered before browser paint)
✅ Automatic route change detection
✅ MutationObserver for dynamic content
✅ Customizable language switcher
✅ TypeScript support
✅ Works with React Router and Next.js
✅ Edit mode for managing exclusions
✅ Automatic translation miss detection
✅ Automatic multilingual sitemap generation (v4.2.2+)

Automatic Sitemap (v4.2.2+)

Your multilingual sitemap is automatically generated with zero configuration. Just install @aixyte/aixster and it works!

Zero Configuration

<AixsterProvider
  apiKey="aix_xxx"
  defaultLocale="en"
  locales={['en', 'de', 'fr', 'es']}
>
  <App />
</AixsterProvider>

// ✅ That's it! Sitemap exists automatically at:
// https://mvbumiwzjytmxswfjgzn.supabase.co/functions/v1/generate-sitemap/aix_xxx

Features

✅ Auto-discovery: Pages automatically added as visitors browse
✅ Multilingual: All language variants included
✅ SEO-optimized: Proper hreflang tags for all locales
✅ Always up-to-date: No manual regeneration needed
✅ Cached: 1-hour cache for performance
✅ Zero maintenance: Completely automatic

How It Works

Page tracking: AixsterProvider tracks every visited page
Link injection: <link rel="sitemap"> tag automatically added to <head>
XML generation: Edge function generates sitemap from discovered pages
Google discovers: Search engines find sitemap via link tag

Disable Sitemap (Optional)

<AixsterProvider
  apiKey="aix_xxx"
  defaultLocale="en"
  locales={['en', 'de', 'fr']}
  sitemap={false}  // Disable automatic sitemap
>
  <App />
</AixsterProvider>

Serve from Your Domain (Optional)

Netlify

# netlify.toml
[[redirects]]
  from = "/sitemap.xml"
  to = "https://mvbumiwzjytmxswfjgzn.supabase.co/functions/v1/generate-sitemap/YOUR_API_KEY"
  status = 200

Vercel

{
  "rewrites": [{
    "source": "/sitemap.xml",
    "destination": "https://mvbumiwzjytmxswfjgzn.supabase.co/functions/v1/generate-sitemap/YOUR_API_KEY"
  }]
}

Next.js

// app/sitemap.xml/route.ts
export async function GET() {
  const res = await fetch(
    'https://mvbumiwzjytmxswfjgzn.supabase.co/functions/v1/generate-sitemap/YOUR_API_KEY'
  );
  return new Response(await res.text(), {
    headers: { 'Content-Type': 'application/xml' }
  });
}

How It Works

Wrap your app with <AixsterProvider>
Locale detection from URL path or query params
Translations loaded from Aixster API
DOM translated before React paints
MutationObserver catches dynamic content
Language switcher appears for easy switching

License

COMMERCIAL LICENSE - NOT OPEN SOURCE

For Agencies & Developers

✅ You MAY:

Use Aixster in unlimited client projects
Charge clients for integration and development services
Deploy compiled code to client applications
Install via npm/yarn for development and production

❌ You MAY NOT:

Resell or white-label Aixster as your own product
Redistribute source code or allow client modifications
Build competing translation products
Extract code for other purposes

For End Clients

End clients receive usage rights through their agency/developer and may operate applications containing Aixster, but may not modify, redistribute, or extract the software.

License

This software is licensed under the Aixster Commercial License. This is NOT open source software. All intellectual property rights remain the exclusive property of Mertens Advies.

See LICENSE file for complete terms and conditions.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@aixyte/aixster

Installation

Quick Start

Option 1: Path Mode (Recommended - Automatic Language URLs)

Option 2: Query Mode (Simple - Query Parameters)

Next.js

Configuration

Routing Modes

Path Mode Helpers (v4.2+)

LangLink - Language-Aware Links

useLang - Get Current Language

useLangNavigate - Programmatic Navigation

Core Hooks

useAixster

useAixsterTranslate

useAixsterEdit

Features

Automatic Sitemap (v4.2.2+)

Zero Configuration

Features

How It Works

Disable Sitemap (Optional)

Serve from Your Domain (Optional)

Netlify

Vercel

Next.js

How It Works

License

For Agencies & Developers

For End Clients

License