外部ライブラリ

利用可能な外部ライブラリ一覧

コードエディターでは、下記の外部ライブラリをインポートして使用できます。

名前	URL
react	https://www.npmjs.com/package/react
dayjs	https://www.npmjs.com/package/dayjs
@chakra-ui/react	https://www.npmjs.com/package/@chakra-ui/react
react-chartjs-2	https://www.npmjs.com/package/react-chartjs-2

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のv2系を利用できますが、v3系へのメジャーバージョンアップにより互換性を失う可能性があります。 '@chakra-ui/react@2'からのインポートは@chakra-ui/reactのv2系に固定されます。

Chakra UI 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 を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;