Shopify アプリで頻出する翻訳処理を npm で行うサンプル

Shopify アプリを複数作っていると重複する処理がいくつか出てきますが、その中の一つに翻訳処理があります。

@huckleberry-inc/shopify-app-locales npm を使うと処理を統一することができます。

import React from "react";
import {
  Page,
  Card,
  FormLayout,
  ChoiceList,
  Layout,
} from "@shopify/polaris";
import { Translator } from "@huckleberry-inc/shopify-app-locales";

export const Component = () => {
  const translator = new Translator("ja");
  const orderChoices = Array.from(translator.orderStatuses).map(
    ([key, value]) => {
      return { label: value, value: key };
    }
  );

  return (
    <Page
    >
      <Layout>
        <Layout.AnnotatedSection
        >
          <Card sectioned>
            <FormLayout>
              <ChoiceList
                title="注文状況"
                choices={orderChoices}
                onChange={(choice) => {}}
                selected={["any"]}
              />
            </FormLayout>
          </Card>
        </Layout.AnnotatedSection>
      </Layout>
    </Page>
  );
};

Shopify.png1272×416 18 KB