Popper

Popper는 floating ui 라이브러리를 사용하여 특정 요소를 기준으로 오버레이를 띄울 때 사용하는 컴포넌트입니다.

Introduce

floating ui 라이브러리를 사용하여 특정 요소를 기준으로 오버레이를 띄울 때 사용합니다.

import { Popper, PopperAnchor, PopperContent, PopperArrow, Button, FlexBox, Typography, NoSsr } from '@wanteddev/wds';

const Demo = () => {
  return (
    <Popper>
      <PopperAnchor>
        <Button>Anchor</Button>
      </PopperAnchor>
      <NoSsr>
        <PopperContent>
          <FlexBox>
            <PopperArrow />
            <Typography>콘텐츠</Typography>
          </FlexBox>
        </PopperContent>
      </NoSsr>
    </Popper>
  )
}

export default Demo;

Anatomy

Popper는 아래와 같은 구조를 가집니다.

<Popper>
  <PopperAnchor>
    <Button />
  </PopperAnchor>

  <PopperContent>
    <PopperArrow />
  </PopperContent>
</Popper>

API

Popper

children 외 추가적인 옵션을 제공하지 않습니다.

PopperAnchor

children 으로 요소를 지정합니다.

PopperArrow

Name	Types	defaultValue
`children`	`ReactNode`	`-`
`sx`	`SxProp`	`-`

PopperContent

Name	Types	defaultValue
`offset`	`number`	`10`
`position`	`"top-start" \| "top-center" \| "top-end" \| "right-start" \| "right-center" \| "right-end" \| "bottom-start" \| "bottom-center" \| "bottom-end" \| "left-start" \| "left-center" \| "left-end"`	`"bottom-center"`
`referenceHidden`	`boolean`	`false`
`referenceHiddenOffsets`	`SideObject`	`-`
`wrapperProps`	`DefaultComponentProps<{}, 'div'>`	`{}`
`setContext`	`(context: __type) => void`	`-`
`container`	`null \| Element \| DocumentFragment`	`-`
`disablePortal`	`boolean`	`-`
`children`	`ReactNode`	`-`