Package Exports

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-portal-compat-context) 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-portal-compat-context

This package contains the React Context for compat layer in @fluentui/react-portal-compat.

Installation

yarn add @fluentui/react-portal-compat-context

Usage

Note: These APIs are intended to be used by library developers, please use @fluentui/react-portal-compat if you need Portal compatibility.

PortalCompatContextProvider and usePortalCompat() are exported APIs for implementing compat layer.

import { PortalCompatContextProvider, usePortalCompat } from '@fluentui/react-portal-compat-context';

function Consumer() {
  const registerEl = usePortalCompat();

  React.useEffect(() => {
    const portalEl = document.createElement('div');

    return registerEl(portalEl);
  }, [registerEl]);

  return null;
}

function App() {
  const registerEl = React.useCallback((portalEl: HTMLElement) => {
    // do something...
    console.log(portalEl);

    return () => {
      // do something for cleanups...
    };
  }, []);

  return (
    <PortalCompatContextProvider value={registerEl}>
      <Consumer />
    </PortalCompatContextProvider>
  );
}