リンク

• 開発者ガイド

インストール

npm:

npm install @conken-oss-pkg/frontend-react-emotion

yarn:

yarn add @conken-oss-pkg/frontend-react-emotion

利用方法

このライブラリで提供されるコンポーネントはコンポーネント名とタイプの組合わせることで使いたい

• コンポーネント名 (Button, Calendar などのどんな部品なのかを指定します)
• タイプ (Basic, Pop などのどんなデザインなのかを指定します)

<コンポーネント名.タイプ>XXX</コンポーネント名.タイプ>

また、各コンポーネントは変更可能なスタイルをオブジェクトとして受け取ることでカスタマイズ可能です。 このオブジェクトの方もコンポーネント同様に {コンポーネント名}Style.{タイプ} というように指定する子利用可能です。

const style: ComponentStyle.BASIC = {
  TEXT: "#fff",
  BACKGROUND: "#000",
  FONT_FAMILY: "sans-serif",
};

export const MyComponent = (): JSX.Element => {
  return <Component.BASIC customizableStyle={style} />;
};

実際の利用例は以下のような形です。

import { useCallback } from "react";
import { Button, ButtonStyle } from "@conken-oss-pkg/frontend-react-emotion";

const style: ButtonStyle.BASIC = {
  TEXT: "#fff",
  BACKGROUND: "#000",
  FONT_FAMILY: "sans-serif",
};

export type Props = {
  label: string;
};

export const MyButton = ({ label }: Props): JSX.Element => {
  const handleClick = useCallback(() => {
    console.log("clicked!!");
  }, []);

  return (
    <Button.BASIC customizableStyle={style} onClick={handleClick}>
      {label}
    </Button.BASIC>
  );
};