ReactのUIライブラリ RadixUIを試してみた

#React

北川慶太

2022.06.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。データアナリティクス事業本部サービスソリューション部の北川です。

RadixUIについて

Radix Primitivesは、アクセシビリティ、カスタマイズ、および開発者エクスペリエンスに重点を置いた低レベルのUIコンポーネントライブラリです。これらのコンポーネントは、設計システムのベースレイヤーとして使用することも、段階的に採用することもできます。

RadixUIはReactのUIライブラリになります。スタイルの設定がされていないのが特徴で、柔軟性が高く、さまざまなスタイリング方法が使えます。

試してみた

使用方法

RadixUIをインストールします。使用するコンポーネントごとにインストールするのが特徴です。

$ yarn add @radix-ui/"使いたいコンポーネント"@latest -E

使用する際は、コンポーネントをインポートして、それぞれのパーツを組み立てていきます。

import * as Accordion from '@radix-ui/react-accordion';

() => (
  <Accordion.Root>
    <Accordion.Item>
      <Accordion.Header>
        <Accordion.Trigger />
      </Accordion.Header>
      <Accordion.Content />
    </Accordion.Item>
  </Accordion.Root>
);

スタイリング

また、コンポーネントはclassNameをpropsとして受け取ることができるので、そのままcssを当てることができます。

data-state属性を使用すると、コンポーネントの状態によってスタイルを設定することができます。

.accordion-item {
  border-bottom: 1px solid #ccc;
}

.accordion-item[data-state='open'] {
  border-bottom-width: 2px;
}

stitches

stitchesを使用したスタイリング方法。公式のコンポーネントデザイン例では、stitchesが採用されています。

import React from "react";
import { styled } from "@stitches/react";
import { violet, blackA } from "@radix-ui/colors";
import { CheckIcon } from "@radix-ui/react-icons";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";

const StyledCheckbox = styled(CheckboxPrimitive.Root, {
  all: "unset",
  backgroundColor: "white",
  width: 25,
  height: 25,
  borderRadius: 4,
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  boxShadow: `0 2px 10px ${blackA.blackA7}`,
  "&:hover": { backgroundColor: violet.violet3 },
  "&:focus": { boxShadow: `0 0 0 2px black` },
});

const StyledIndicator = styled(CheckboxPrimitive.Indicator, {
  color: violet.violet11,
});

export const Checkbox = StyledCheckbox;
export const CheckboxIndicator = StyledIndicator;

const Flex = styled("div", {
  display: "flex",
  justifyContent: "center",
  height: "100vh",
});
const Label = styled("label", {
  fontSize: 15,
  lineHeight: 1,
  userSelect: "none",
});

export const CheckboxDemo = () => (
  <form>
    <Flex css={{ alignItems: "center" }}>
      <Checkbox defaultChecked id="c1">
        <CheckboxIndicator>
          <CheckIcon />
        </CheckboxIndicator>
      </Checkbox>
      <Label css={{ paddingLeft: 15 }} htmlFor="c1">
        Accept terms and conditions.
      </Label>
    </Flex>
  </form>
);

export default CheckboxDemo;

変数に格納したものとexportすることで、デザインが当たったコンポーネントを作成できます。

tailwind.css

tailwind.cssのUIライブラリとしては、headlessUIの採用率が高いイメージがあります。headlessUIでは少し物足りないなというプロジェクトでは、選択肢の一つになると思います。

import React from "react";
import { CheckIcon } from "@radix-ui/react-icons";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";

export const CheckboxDemo = () => (
  <div className="flex h-screen justify-center items-center">
    <CheckboxPrimitive.Root
      className="border border-blue-500"
      defaultChecked
      id="c1"
    >
      <CheckboxPrimitive.Indicator>
        <CheckIcon />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
    <label style={{ paddingLeft: 15 }} htmlFor="c1">
      Accept terms and conditions.
    </label>
  </div>
);

export default CheckboxDemo;