Fine-grained reactive translation for Solid.js & SolidStart

What gets translated

• ✓Fine-grained reactive signals and memos
• ✓SolidStart SSR, streaming, and static site generation
• ✓Dynamic route parameters and <A> navigation
• ✓Nested components and suspense boundaries
• ✓Zero virtual DOM overhead
• ✓HTML head meta tags and hreflang
• ✓Custom reactive switcher component
• ✓Fallback language and offline cache

Setup guide

1. 1

   Install @lingvit/solid

   Install the SDK via npm or pnpm.

   npm install @lingvit/solid

2. 2

   Wrap your root with LingvitProvider

   Configure the provider in your main entry file.

   import { LingvitProvider } from '@lingvit/solid';
   
   render(() => (
     <LingvitProvider projectKey="lng_pk_...">
       <App />
     </LingvitProvider>
   ), document.getElementById('root')!);

3. 3

   Translate strings with useLingvit()

   Use reactive translate primitives in your components.

   import { useLingvit } from '@lingvit/solid';
   
   function Hero() {
     const { t } = useLingvit();
     return <h1>{t('Welcome to our app')}</h1>;
   }