We just released the SejHey i18n plugin for React

Say goodbye to clunky translation workflows! @sejhey/react-i18n makes in-context editing effortless, letting you update and preview translations directly in your app. With fast CDN-based loading, your multilingual content stays lightning quick, while hooks and components make rendering dynamic translations a breeze. Perfect for React developers who want real-time localization without the hassle.

The React plugin is a fully integrated SDK that takes care of everything for you. Built in support for Next.js, caching, and more means you can focus on building your app while we handle the localization.

Installation and usage

import { SejheyI18n, SejHeyProvider } from '@sejhey/react-i18n'

/* Create the i18n instance */
const i18n = new SejheyI18n({ defaultLanguage: 'en', projectId: 'zbzz-xqjv' })
  .useCdnLoader() //Fetch translations from SejHey CDN, always up to date.
  .useInContextEditor() //This enables in-context editing by adding ?in_context=true
  .useLanguagePicker() //Place a language picker on your site automatically


/* Wrap you app with <SejHeyProvider> */
export default function MyApp() {
  return (
    <SejHeyProvider i18n={i18n}>
      <AnotherComponent />
    </SejHeyProvider>
  )
}

/* Now use translations like this */
const AnotherComponent = () => {
  const { t } = useTranslate()

  return (
    <>
      <h1>{t('welcome_message')}</h1>

      {/* Or if you prefer a component */}

      <T keyName='welcome_message' />
    </>
  )
}

Check it out on npm here