Neoclassical Philosophic Musings

    storybook-addon-linguijs

    1.0.10 • Public • Published

    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>
    ));

    Install

    npm i storybook-addon-linguijs

    DownloadsWeekly Downloads

    481

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    75.2 kB

    Total Files

    21

    Last publish

    Collaborators

    • benchaaben