@snack-uikit/popover-private v0.14.8

Popover Private

Installation

npm i @snack-uikit/popover-private

Changelog

Example

import { PopoverPrivate } from "@snack-uikit/popover-private";

function App() {
  return (
    <PopoverPrivate
        placement='top'
        popoverContent='Не нажимать, опасно!'
        trigger='click'
      >
        <button>Button with popover</button>
    </PopoverPrivate>
  );
}

PopoverPrivate

Props

children: ReactNode | ChildrenFunction

Референс, относительно которого рисуется поповер. Возможно несколько вариантов:

• в children передан компонент, который принимает в себя ref. В таком случае пропсы этого компонента будут дополнены необходимыми для работы триггеров отображения: useHoverTrigger, useClickTrigger, useFocusTrigger.

  Осторожно, ref будет перезаписан. Если вы хотите получить ref на children поповера, можете передать ref в параметр triggerRef. Тогда поповер установит туда значение:

    <PopoverPrivate
      popoverContent={<div className={style.content}>some tip here</div>}
      useHoverTrigger
      triggerRef={(button) => { /* button HTMLElement из children */ }}
  
      <button>some button</button>
    </PopoverPrivate>

• в children передан компонент, который НЕ принимает в себя ref. В таком случае компонент будет обернут в span, который и послужит рефом для поповера.

• в children передана функция. Эта функция будет вызвана на каждый рендер, она должна возвращать ReactNode. В параметры принимает ref, который нужно установить в целевой компонент и функцию getReferenceProps, возвращающую необходимые для ref параметры. Пример:

    <PopoverPrivate
      popoverContent={<div className={style.content}>some tip here</div>}
      useHoverTrigger
    >
      {({ getReferenceProps, ref }) => (
        <label>
          Set the value
          <input ref={ref} {...getReferenceProps({ onClick: onClickInputHandler })} />
        </label>
      )}
    </PopoverPrivate>

• в children передан примитив string, number или React.Fragment. Children будет обернут в span.