Skip to content
Localive

React

Install

Section titled “Install”
Terminal window
npm install @localive/react @localive/adapter-i18next i18next react-i18next

Wrap Your App with the Provider

Section titled “Wrap Your App with the Provider”

LocaliveProvider takes adapter, locales, and defaultLocale as props. It creates the Localive instance internally — you do not pass a pre-built localive instance:

import { LocaliveProvider, LiveEditorOverlay } from '@localive/react';
import { withI18next } from '@localive/adapter-i18next';
import i18n from './i18n';


function App() {
  return (
    <LocaliveProvider
      adapter={withI18next(i18n)}
      locales={['en', 'fr', 'de']}
      defaultLocale="en"
    >
      <MyApp />
      <LiveEditorOverlay />
    </LocaliveProvider>
  );
}

Tag Elements for Editing

Section titled “Tag Elements for Editing”

Use useLocaliveTag() to make any element resolvable to a translation key. It returns { getTagProps, resolveKey } — spread getTagProps(key) onto the element:

import { useLocaliveTag } from '@localive/react';


function Nav() {
  const { getTagProps } = useLocaliveTag();


  return (
    <nav>
      <a {...getTagProps('nav.home')}>{t('nav.home')}</a>
      <a {...getTagProps('nav.about')}>{t('nav.about')}</a>
    </nav>
  );
}

Toggle the Inspector

Section titled “Toggle the Inspector”

useLocaliveEditor() reads the instance from context (it takes no arguments) and returns { isActive, activate, deactivate, toggle, getTranslation }. Note the exact return shape — there is no locale or setLocale; use your i18n library (e.g. i18next.changeLanguage) to switch locales:

import { useLocaliveEditor } from '@localive/react';


function Toolbar() {
  const { isActive, toggle, getTranslation } = useLocaliveEditor();


  return (
    <button onClick={toggle}>
      {isActive ? '✕ Close editor' : '✎ Open editor'}
    </button>
  );
}

react-intl Adapter

Section titled “react-intl Adapter”

If you use react-intl instead of i18next, swap the adapter:

import { LocaliveProvider } from '@localive/react';
import { withReactIntl } from '@localive/adapter-react-intl';


<LocaliveProvider
  adapter={withReactIntl(intl)}
  locales={['en', 'fr']}
  defaultLocale="en"
>
  <MyApp />
  <LiveEditorOverlay />
</LocaliveProvider>

Next Steps

Section titled “Next Steps”