LoginSignup
0
0

[React]hoverで表示するツールチップなどはstateを使わずに切り替えるべし

Posted at

hoverで表示する時はstateを使うんじゃない

タイトルはキャッチーな感じで

本題

const [isHover, setIsHover] = useState(false)

...

const handleMouseOver = () => {
  setIsHover(true)
}

const handleMouseLeave = () => {
  setIsHover(false)
}

...

return (
  <div onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>
  {
    isHover && <>ツールチップ</>
  }
  </div>
)

上記のような実装でツールチップやアイコンの表示・非表示を切り替えていることがあるかもしれませんが
この手法だとマウスを早く動かされたりするなどで切り替えがうまくいかないことがあります。
またツールチップの表示・非表示するだけでその個数分stateを作らないといけないのも非効率です。
ですので
hoverを使用した実装にするのが良いです。

...
// 今回はTailwindcss
// 他でも同じように使用できます
return (
  <div className='hover:[&>div]:block'>
    <div className='none'>ツールチップ</div>
  </div>
)

[&>div]を修正すればsvgなどにも対応できるので、非常に便利です。
ぜひ皆さんもこちらで切り替えをしてみてください。

最後に

display visiblity
非表示時の領域確保   ×     ⚪︎

非表示時に使う代表的なこの2つの違いを認識しておくと使う時に根拠がはっきりすると思います。

閲覧ありがとうございました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0