react-hooks-use-modalを使ってみる

react-hooks-use-modalを使ってみた

ログアウト時などにモーダルを表示させたいと思ったので色々ライブラリを調べていたところreact-hooks-use-modalという便利なものを見つけたので実装してみたいと思います。
今回は、CSSなどの装飾はせずにあくまでもモーダルの実装だけを行います。

インストール

Reactで使用していくので、まずはインストールします。yarnの場合はnpmをyarnに変えるだけでオッケーです。

$ npm install react-hooks-use-modal

useModal

使い方としては、useModalというAPIを使用します。
まずは、利用するコンポーネントに先ほどインストールしたものをインポートします。

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

useModalには4つの機能が存在します。

• Modal ・・・　コンポーネントで画面中央に表示される
• open　・・・　モーダルを開く
• close　・・・モーダルを閉じる
• isOpen　・・・モーダルが開いているかどうかを知る真偽値

const [Modal, open, close, isOpen] = useModal('root', {
    preventScroll: true,
    focusTrapOptions : { 
       clickOutsideDeactivates : false
    },  
  });

rootの部分は、HTMLのdivタグに指定してあるidを設定します。
preventScroll: true は、モーダル表示後のスクロールを抑制してくれます。falseにするとスクロールすることができるようになります。
focusTrapOptionsにclickOutsideDeactivates : falseを指定することでモーダル表示中にクリックしてもモーダルが閉じなくなります。

実際に使用してみる

今回はログアウトボタンをクリックした時に、モーダルを表示してみます。

<div>
    <button onClick={open}>ログアウト</button>
</div>
<Modal>
    <div>
        <h1>ログアウトしますか？</h1>
        <button onClick={logout}>はい</button>　// logoutメソッドはログアウトの機能を実装してください。
        <button onClick={close}>いいえ</button>
    </div>
</Modal>

openメソッドを使用することでログアウトボタンを押した時にModalコンポーネントでラップしたコンポーネントを画面中央に表示することができます。
closeメソッドを使用することでモーダルを閉じることができます。

最後に

今回はモーダル表示の必要最小限の機能にとどめましたが、CSSなどで自分なりにデザインしてもらえるとUIの良いモーダルを実装することができると思います。

参考記事