TypeScript で書いたコンポーネントと一緒に使う

設定ファイル

Docz を TypeScript と一緒に使うのは超簡単で設定ファイルのdoczrc.jsに1行追加するだけです。このように、

module.exports = {
  title: 'サイトのタイトル',
  typescript: true,
};

typescript: trueとしましょう。

ページファイル

例えば./button.tsxというファイルでButtonコンポーネントを TypeScript で実装済とします。(必要なものはインストールが必要ですreactstyled-componentsなど)であれば、.mdxファイルで単に.tsファイルのようにimportして JSX で使うだけです。

./button.tsxなのでbutton.mdxというファイルで作ります。

---
name: Button
path: /atoms/button
---

import {Playground} from 'docz';
import Button from './button';

# Button

<Playground>
  {() => <Button>Button</Button>}
</Playground>

yarn docz dev --port 4254などで起動して確認できれば完了です。