microCMS

react-hooks-use-modalを使ってモーダルコンポーネントを作成する

かみむら

この記事は公開後、1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちはかみむらです。

先日柴田さんが公開していた、Reactのモーダルコンポーネントを簡単に作成できるライブラリ react-hooks-use-modal をmicroCMSのOrganizationに移行しました。

こちらがGitHubのリポジトリです。
https://github.com/microcmsio/react-hooks-use-modal

こちらはデモになります。
https://microcmsio.github.io/react-hooks-use-modal/

react-hooks-use-modalはmicroCMSの管理画面内部にも使われています。例えばWebhook追加時のモーダルコンポーネントです。

モーダルのコンポーネントは1から実装すると非常に工数がかかりますが、react-hooks-use-modalを使えば少ない工数で実装することができます。

react-hooks-use-modalが他のモーダルライブラリと違う点として、hooks自身がコンポーネントを返すところが挙げられます。これによって、本来ライブラリの外側で定義する必要があるisOpenフラグ等を内部で定義できるため、よりシンプルなAPI仕様を実現しています。

今回はライブラリの導入と使い方について解説します。

インストール

ここからは、Reactをベースとしたプロジェクトに導入する前提で話を進めていきます。まずはreact-hooks-use-modalをインストールしましょう。バージョンは2.0.1~を想定しています。

$ npm install  react-hooks-use-modal

or

$ yarn install  react-hooks-use-modal

そして、利用するコンポーネントにライブラリをインポートします。

import { useModal } from 'react-hooks-use-modal';

使い方

使い方はシンプルでuseModalというAPIを使います。useModalではModalopencloseisOpenの4つを返します。オプションで、preventScroll
(スクロールの有無)を指定できます。デフォルトはfalseです。

 const [Modal, open, close, isOpen] = useModal('root', {
    preventScroll: true //これはオプション。デフォルトはfalse
  });

コンポーネント側では下記のように使用します。onClickに渡しているopenが実行されると、isOpenの値がtrueに変わりモーダルが開きます。そして、closeが実行されるとisOpenの値がfalseに変わりモーダルが閉じます。

<div>
    <div>Modal is Open? {isOpen ? 'Yes' : 'No'}</div>
    <button onClick={open}>OPEN</button>
    <Modal>
      <div style={modalStyle}>
        <h1>Title</h1>
        <p>This is a customizable modal.</p>
        <button onClick={close}>CLOSE</button>
      </div>
    </Modal>
 </div>

今回サンプルで利用したコードの全体像はこちらです。

// example: App.tsx
import React from 'react';
import { useModal } from 'react-hooks-use-modal';

const modalStyle: React.CSSProperties = {
  backgroundColor: '#fff',
  padding: '60px 100px',
  borderRadius: '10px',
};

const App: React.VFC = () => {
  const [Modal, open, close, isOpen] = useModal('root',{
    preventScroll: true,
  });
  return (
    <div>
      <div>Modal is Open? {isOpen ? 'Yes' : 'No'}</div>
      <button onClick={open}>OPEN</button>
      <Modal>
        <div style={modalStyle}>
          <h1>Title</h1>
          <p>This is a customizable modal.</p>
          <button onClick={close}>CLOSE</button>
        </div>
      </Modal>
    </div>
  );
};

上記のコードを実行してみましょう。

react-hooks-use-modal API

ここからはreact-hooks-use-modaのAPIについて説明していきます。

ModalComponent モーダルのコンポーネントです。これをラップしたコンポーネントは画面中央に配置されます。
openFunc モーダルをオープンするためのメソッドです。isOpenの値がtrueになります。
closeFunc モーダルをクローズするためのメソッドです。isOpenの値がfalseになります。
isOpenBool isOpenの値です。
domNode これはオプションです。デフォルトの値は'root'です。 モーダルコンポーネントはReact-Portalを使っているため、特定のdomNodeを使いたい場合に使用します。
preventScroll モーダルコンポーネントがオープンになっている時にスクロールを表示するオプションです。 デフォルトの値はfalseです。

おわりに

今回はreact-hooks-use-modalを紹介しました。microCMS内部でも利用されていて非常に使いやすいライブラリとなっています。もしバグやライブラリへの要望等ありましたら、ぜひissuesPRで伝えてください。

https://github.com/microcmsio/react-hooks-use-modal/issues

-----

microCMSは日々改善を進めています。
ご意見・ご要望は管理画面右下のチャット、公式Twitterメールからお気軽にご連絡ください!
引き続きmicroCMSをよろしくお願いいたします!

使いやすさにこだわれるフロントエンドエンジニアを募集!

ヘッドレスCMS「microCMS」のフロントエンドエンジニアを募集しています。 今後の売上拡大に向けたシステムを一緒に作りましょう!

募集要項を確認

microCMSについてお問い合わせ

初期費用無料・14日間の無料トライアル付き。ご不明な点はお気軽にお問い合わせください。

お問い合わせ

microCMS公式アカウント

microCMSは各公式アカウントで最新情報をお届けしています。
フォローよろしくお願いします。

  • X
  • Discord
  • github

ABOUT ME

かみむら
フロントエンドエンジニア。テックブロガーでもあります。JAMstackアーキテクチャーやSPA(React、Vue)技術が好きです。