Localization for Remix

Basic Localization Approach

The simplest way to implement localization in NextStepjs is to create separate steps arrays for each language and switch between them based on the current locale:

// Define steps for different languages
const stepsEn = [
  {
    tour: 'welcome',
    steps: [
      {
        icon: <>👋</>,
        title: 'Welcome',
        content: <>This is the first step</>,
        selector: '#welcome-element',
        side: 'top',
      },
      // More steps...
    ],
  },
];

const stepsEs = [
  {
    tour: 'welcome',
    steps: [
      {
        icon: <>👋</>,
        title: 'Bienvenido',
        content: <>Este es el primer paso</>,
        selector: '#welcome-element',
        side: 'top',
      },
      // More steps...
    ],
  },
];

// Use the appropriate steps array based on locale
const MyApp = ({ locale }) => (
  <NextStepProvider>
    <NextStepReact steps={locale === 'es' ? stepsEs : stepsEn}>
      {/* Your app content */}
    </NextStepReact>
  </NextStepProvider>
);

Integration with i18n Libraries

For more robust localization, you can integrate NextStepjs with popular i18n libraries like react-i18next or next-intl. This approach allows you to manage translations more efficiently:

Using react-i18next

// In your steps.tsx file
import { useTranslation } from 'react-i18next';

export function getLocalizedSteps() {
  const { t } = useTranslation();
  
  return [
    {
      tour: 'welcome',
      steps: [
        {
          icon: <>👋</>,
          title: t('welcome.title', 'Welcome'), // Fallback to English
          content: <>{t('welcome.content', 'This is the first step')}</>,
          selector: '#welcome-element',
          side: 'top',
        },
        // More steps...
      ],
    },
  ];
}

// In your app component
function MyApp() {
  const localizedSteps = getLocalizedSteps();
  
  return (
    <NextStepProvider>
      <NextStepReact steps={localizedSteps}>
        {/* Your app content */}
      </NextStepReact>
    </NextStepProvider>
  );
}