外部ライブラリ
利用可能な外部ライブラリ一覧
ビューでは、下記の外部ライブラリをインポートして使用できます。
dayjs
dayjsは日付操作の関数を提供するライブラリです。
dayjs の使用例
import { useState } from "react";
import dayjs from "dayjs";
import { Button, Box, Card, VStack } from "@basemachina/view";
const date = dayjs().format("YYYY-MM-DD HH:mm:ss");
const App = () => {
const [showDate, setShowDate] = useState(false);
const handleClick = () => {
setShowDate(true);
};
return (
<Card>
<VStack>
<Box>{`日付: ${showDate ? date : ""}`}</Box>
<Button title="日付を表示する" onClick={handleClick} />
</VStack>
</Card>
);
};
export default App;
@chakra-ui/react
@chakra-ui/reactは、汎用的なコンポーネントやフックを提供するライブラリです。
@chakra-ui/reactは'@chakra-ui/react'と'@chakra-ui/react@2'からインポートできます。
'@chakra-ui/react'からのインポートは@chakra-ui/reactのメジャーバージョンアップにより互換性を失う可能性があります。
'@chakra-ui/react@2'からのインポートは@chakra-ui/reactのv2系に固定されます。
@chakra-ui/react の使用例
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
useDisclosure,
Button,
} from "@chakra-ui/react";
function App() {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<>
<Button onClick={onOpen}>開く</Button>
<Modal
isCentered
onClose={onClose}
isOpen={isOpen}
motionPreset="slideInBottom"
>
<ModalOverlay />
<ModalContent>
<ModalHeader>タイトル</ModalHeader>
<ModalCloseButton />
<ModalBody>内容</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
保存
</Button>
<Button variant="ghost">キャンセル</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}
export default App;
react-chartjs-2
react-chartjs-2は、グラフ表示のライブラリである Chart.js (opens in a new tab) をReactのコンポーネントとして提供するライブラリです。
react-chartjs-2は'react-chartjs-2'と'react-chartjs-2@5'からインポートできます。
'react-chartjs-2'からのインポートはreact-chartjs-2のメジャーバージョンアップにより互換性を失う可能性があります。
'react-chartjs-2@5'からのインポートはreact-chartjs-2のv5系に固定されます。
react-chartjs-2 の使用例
import { Bar } from "react-chartjs-2";
export const options = {
responsive: true,
plugins: {
legend: {
position: "top",
},
title: {
display: true,
text: "新規登録数",
},
},
};
const labels = ["January", "February", "March", "April", "May", "June"];
export const data = {
labels,
datasets: [
{
label: "昨年",
data: [100, 120, 150, 180, 230, 250],
backgroundColor: "rgba(255, 99, 132, 0.5)",
},
{
label: "今年",
data: [100, 150, 130, 200, 300, 350],
backgroundColor: "rgba(53, 162, 235, 0.5)",
},
],
};
function App() {
return <Bar options={options} data={data} />;
}
export default App;