frontend

[radix] popover when hover trigger

2023. 8. 9. 11:30
목차
  1. 아래 이슈에서 도움을 받았습니다.

아래 이슈에서 도움을 받았습니다.

https://github.com/radix-ui/primitives/issues/2051

 

Popover when hover · Issue #2051 · radix-ui/primitives

Feature request Is it possible to show popover when hover on the trigger component? Could be there an option to choose either : when click or when hover for showing the popover?

github.com

 

popover 기능은 일반적으로 hover 되었을 때 나타나는 것이 조금 더 자연스러운 ux라고 생각합니다.

다만 radix의 trigger 기능은 기본적으로 클릭이벤트를 전제하고 있기 때문에

처음에는 어떻게 설정을 해줘야 할 지 혼란스러울 수 있습니다.

import { Button } from '@mui/material';
import * as Popover from '@radix-ui/react-popover';
import React from 'react';

const PopoverExample = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const handleMouseEnter = () => {
    setIsOpen(true);
  };

  const handleMouseLeave = () => {
    setIsOpen(false);
  };

  return (
    <Popover.Root open={isOpen} onOpenChange={setIsOpen}>

      <Popover.Trigger
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        Hover me
      </Popover.Trigger>

      <Popover.Portal>
        <Popover.Content className="fadeinout">example content</Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
};

export default PopoverExample;

Root에 open과 onopenChange prop을 전달해줄 수 있습니다.

useState에 쉽게 매칭되는 구조로

open은 상태를 전달하고 onOpenChange에는 set함수를 넣어주면 됩니다.

 

이후 onMouseEnter, onMouseLeave 리액트 이벤트를 이용하여

호버되었을 때에는 화면에 콘텐츠를 표시하고

호버상태가 풀린 경우에는 콘텐츠를 더이상 표시하지 않게 open 상태를 false로 전환합니다.

 

 

반응형
저작자표시 비영리 (새창열림)

'frontend' 카테고리의 다른 글

웹뷰(WebView)란 무엇일까  (0) 2023.09.13
2023년 신입 프론트엔드 개발자 취업,취준 회고  (12) 2023.09.02
Barrel export 패턴으로 깔끔한 import 관리  (0) 2023.08.06
프론트엔드 CORS 에러 핸들링 빠르고 강한 정리  (0) 2023.07.24
Parsing error: ESLint was configured to run on  (0) 2023.07.13
  1. 아래 이슈에서 도움을 받았습니다.
'frontend' 카테고리의 다른 글
  • 웹뷰(WebView)란 무엇일까
  • 2023년 신입 프론트엔드 개발자 취업,취준 회고
  • Barrel export 패턴으로 깔끔한 import 관리
  • 프론트엔드 CORS 에러 핸들링 빠르고 강한 정리
냠냠맨
냠냠맨
프론트엔드 개발 전반을 다루는 기술 블로그입니다.
냠냠맨
React와 TypeScript를 좋아하는 개발자
냠냠맨
전체
오늘
어제
  • all category (434) N
    • CMC (0)
    • best (11)
    • 년간회고 (1)
    • cheetsheet (15)
    • 프로젝트 회고 (3)
    • 서평 (3)
    • SEO Study (1)
    • 프로젝트 진행기 (10)
    • testcode (9)
    • yarnberry (7)
    • css (21)
    • typescript (15)
    • redux (7)
    • react (43)
    • Next.js (9)
    • Nestjs (3)
    • javascript (44)
    • programmers (67)
    • leetcode (41)
    • frontend (41)
    • backjoon (1)
    • Next.js Beta Docs 번역 (12)
    • TIL (15)
      • html (3)
    • Network (12)
      • 간단 정리 시리즈 (2)
      • 질답 준비 (0)
    • 자료구조와 알고리즘 (2)
    • CS (4)
      • OS (1)
    • 취업준비 (2)
    • zoom websocket (2)
    • talk (6)
    • 면접대비 (1)
    • 코드스테이츠 프론트 (5)
    • 간헐적 회고 (18) N

블로그 메뉴

  • leetcode
  • programmers
  • javascript
  • html
  • css

공지사항

인기 글

태그

  • 프론트엔드
  • 주니어개발자
  • 개발
  • 테오의스프린트17기
  • 말풍선
  • LeetCode
  • JavaScript
  • border말풍선
  • 개발자
  • 테오의스프린트
  • 코드스테이츠 #프론트엔드
  • CSS
  • teosprint
  • frontend

최근 댓글

최근 글

hELLO · Designed By 정상우.
냠냠맨
[radix] popover when hover trigger
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.