Package Exports

@fluentui/react-positioning
@fluentui/react-positioning/lib-commonjs/index.js
@fluentui/react-positioning/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@fluentui/react-positioning) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@fluentui/react-positioning

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

These are not production-ready utilities and should never be used in product. This space is useful for testing new utilities whose APIs might change before final release.

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> }
    </>
  )
}