【Chakra UI】import文が長くなりすぎる問題を何とかする方法

Last updated at 2024-08-05Posted at 2024-08-05

はじめに

Chakra UIに初めて触れてみましたが、様々な部品が用意されて感動する反面、タイトルのような問題（？）が出てきたので対応する方法です。

Chakura UIで用意されている、様々なコンポーネントを1つのファイル内で沢山importしているせいで、import文がやたら長くなるのがちょっとダサいなと思ったので、それを解決する方法です。

ES Modulesのimport文にはアスタリスク（*）が使える。

例（対応前）：

import {
  Box,
  Button,
  Input,
  Center,
  Flex,
  Img,
  Alert,
  Drawer,
  Stack,
  Divider,
  Card,
} from "@chakra-ui/react";

例（対応後）：

import * as UI from "@chakra-ui/react";

使い方：

使用例

<UI.Button type="submit">登録</UI.Button>

ググってもChakra UIを上記のように使う人は居なかったっぽいのでこういう使い方は普通しないのかもしれません…

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします！👇