h-yoshikawa44
commented
3 years ago ドロワー開閉時の inert による非活性制御
ドロワーやモーダル開閉時に、下層の要素を操作できないようにするにはどうすればいいか？ と Twitter でつぶやいたところ、Kudo さんに inert 属性のことを教えていただいた。
inert 属性周辺に関する解説の記事。
一つ一つ非活性制御すると大変なのを、inert 属性がまとめてやってくれる感じらしい。
ポリフィル
現時点では、どのブラウザもサポートしていないので、使用するにはポリフィルを使う必要がある。
インストール
yarn add wicg-inertグローバルでインポート
import 'wicg-inert';あとは要素に inert 属性を指定すればいい。 ...が、TypeScript × React で指定するには少し工夫がいる。
レイアウトファイルで指定してみた。inertFlg にはドロワー開閉状態のフラグを渡す感じ。 （ドロワー部分はレイアウトファイル外になるようにする）
const Layout: FC<Props> = ({ inertFlg, children }) => {
return (
<div>
<Head>
<title>Windbnb</title>
<meta
name="description"
content="devChallenges.io - Windbnb | by h-yoshikawa44"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<div
css={container}
ref={(node) =>
node &&
(inertFlg
? node.setAttribute('inert', '')
: node.removeAttribute('inert'))
}
>
{children}
<Footer />
</div>
</div>
);
};
作業内容