@fluentui/react-positioning
TypeScript icon, indicating that this package has built-in type declarations

9.15.2 • Public • Published

@fluentui/react-positioning

A react hook wrapper around Popper.js for Fluent UI.

Usage

import React from 'react';
import { usePopper } from '@fluentui/react-positioning';

function PopupExample: React.FC = ({ children }) => {
  const {targetRef, containerRef} = usePopper();
  const [open, setOpen] = React.useState(false);

  const onClick = () => setOpen(s => !s);
  return (
    <>
      <button ref={targetRef} onClick={onClick}> Toggle popup </button>
      { open && <div ref={containerRef}>{children}</div> }
    </>
  )
}

Readme

Keywords

none

Package Sidebar

Install

npm i @fluentui/react-positioning

Weekly Downloads

74,892

Version

9.15.2

License

MIT

Unpacked Size

443 kB

Total Files

157

Last publish

Collaborators

  • sopranopillow
  • microsoft1es
  • justslone
  • chrisdholt
  • miroslavstastny
  • levithomason
  • uifabricteam
  • uifrnbot
  • dzearing
  • layershifter
  • ling1726
  • travisspomer