Lism コンポーネント（React・Astro）

Lism CSS は、HTML にクラスを書くだけでなく、React・Astro のコンポーネントとしても使えます。コンポーネントでは、class="-p:20" の代わりに p="20" のように書き、クラスは自動で付きます。このページでは、その土台になる <Lism> を説明します。

React・Astro とは#

• React：画面の部品（コンポーネント）を JavaScript で組み立てる道具です。ファイルは .jsx・.tsx です
• Astro：ページを作るための道具で、部品を .astro のファイルに書きます
• コンポーネント：見出しやカードのような部品を1つにまとめ、<Card> のようにタグの形で何度も使えるようにしたものです

Lism のコンポーネントは、どちらでも同じ書き方で使えます。読み込む場所だけが違います。

使えるようにする#

1. パッケージを入れる#

npm i lism-css

pnpm add lism-css や yarn add lism-css でもかまいません。

2. CSS を読み込む#

import 'lism-css/main.css';

Next.js（16 以降）の場合、この1行を書く場所は、いちばん外側のレイアウトのファイルです（App Router では app/layout.tsx）。@layer を使わない main_no_layer.css や、全部入りの full.css もあります（CSS ファイルの種類）。

3. コンポーネントを読み込む#

import { Box, Flex } from 'lism-css/react';

import { Box, Flex } from 'lism-css/astro';

Next.js で lism.config.js も使うときの準備は、読み込み方（インストール） と lism.config.js で設定する にあります。

Lism コンポーネント（<Lism>）#

<Lism> は、Lism のクラスに合わせた Props（コンポーネントに渡す値）を何でも受け取れる、いちばん基本のコンポーネントです。何も書かなければ、ただの <div> になります。

import { Lism } from 'lism-css/react';
// Astro なら 'lism-css/astro'

<Lism p="20" fw="bold" c="blue" bgc="base-2" bdrs="20">
  Lism content
</Lism>

このコンポーネントは、次の HTML を出します。

<div class="-p:20 -fw:bold -c -bgc:base-2 -bdrs:20" style="--c: var(--blue)">Lism content</div>

同じ HTML を書くと、こう見えます（表示例では、読みやすいように -fz:l を足して文字を大きくしています）。

<div class="-p:20 -fz:l -fw:700 -c -bgc:base-2 -bdrs:20" style="--c: var(--blue)">Lism content</div>

受け取れる Props#

<Lism> が受け取る Lism 専用の Props を Lism Props と呼びます。おもなものは次のとおりです。くわしくは Lism Props（コンポーネントの指定） にあります。

タグごとのコンポーネント（<Text>・<Heading> など）は 基本のコンポーネント（Group・Text など） にあります。

Astro で <Lism> を包んだ部品を作る#

自分の部品の中で <Lism> を使い、Lism Props をそのまま受け取れるようにしたいときの、型の書き方です。

結論：Props の型は、交差型（&。2つの型を1つに合わせる書き方）で作ります。

import { Lism } from 'lism-css/astro';
import type { ComponentProps } from 'astro/types';

type LismProps = ComponentProps<typeof Lism>;

// OK: & で合わせる
type Props = LismProps & {
  class?: string;
};

interface Props extends LismProps と書くと、TypeScript がエラーを出します。

// NG: エラーになる
interface Props extends LismProps {
  class?: string;
}

なぜかというと、<Lism> の型は、layout に何を入れるかで受け取れる Props が変わる、枝分かれした型（ユニオン型）だからです。interface extends は、こういう枝分かれした型を広げられません。

getLismProps()#

as にほかのコンポーネントを渡せないなどで <Lism> を使えないときは、getLismProps() を使います。Lism Props を、className と style に変えてくれます。

import getLismProps from 'lism-css/lib/getLismProps';

function MyComponent({ children }) {
  const lismProps = getLismProps({ p: '20', fz: 'l', c: 'red' });
  // → { className: '-p:20 -fz:l -c', style: { '--c': 'var(--red)' } }

  return <div {...lismProps}>{children}</div>;
}

href のような Lism Props でないものは、そのまま戻り値に入ります。

関連するページ#

• Lism Props（コンポーネントの指定）
• 基本のコンポーネント（Group・Text など）
• アイコン（@lism-css/icons）
• 読み込み方（インストール）
• UI コンポーネントの使い方