Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-linguijs
Addon to provide locale switcher and linguijs react for storybook
npm install storybook-addon-linguijs
Last updated almost 5 years ago
92
Downloads per week
Readme View on GitHub

Lingui react Addon

The linguijs react addon can be used to provide locale switcher and linguijs react.

Getting Started

First, install the addon

npm install -D storybook-addon-linguijs

Note: Following peer dependencies are required: @storybook/addons, @storybook/react, react and lingui/react.

Add this line to your addons.js file (create this file inside your storybook config directory if needed).

import "storybook-addon-linguijs/register";

In your config.js import the setLinguiConfig and withLingui function. Use setLinguiConfig to set the configuration for lingui/react and `withLingui as decorator.

import { addDecorator, configure } from "@storybook/react";
import { setLinguiConfig, withLingui } from "storybook-addon-linguijs";

// Provide a catalog or import and use your existing one
const catalogs = {
  en: {
    messages: {
      "Hello Button": "Hello Button"
    }
  },
  fr: {
    messages: {
      "Hello Button": "Bonjour Button"
    }
  }
};

// Set configuration
setLinguiConfig({
  locales: ["en", "fr"],
  defaultLocale: "en",
  catalogs
});

// Register decorator
addDecorator(withLingui);

// Run storybook
configure(() => require("./stories"), module);

In your story you need to wrap your component with <Trans> or a t function from @lingui/macro

import { Trans } from "@lingui/macro";

storiesOf("Button", Module).add("with text", () => (
  <Button>
    <Trans>Hello Button</Trans>
  </Button>
));
Join the community
6,562 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityIntegrationsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI