How to use @uifabric/react-hooks - 10 common examples

export const PanelHandleDismissTargetExample: React.FunctionComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const openPanel = useConstCallback(() => setIsOpen(true));
  const dismissPanel = useConstCallback(() => setIsOpen(false));

  const onDismiss = useConstCallback((ev?: React.SyntheticEvent) => {
    if (!ev) {
      console.log('Panel dismissed.');
      return;
    }

    // Demonstrates how to do different things depending on how which element dismissed the panel
    console.log('Close button clicked or light dismissed.');
    const srcElement = ev.nativeEvent.srcElement as Element | null;
    if (srcElement && srcElement.className.indexOf('ms-Button-icon') !== -1) {
      console.log('Close button clicked.');
    }
    if (srcElement && srcElement.className.indexOf('ms-Overlay') !== -1) {
      console.log('Light dismissed.');
    }
    dismissPanel();
  });

export const PanelFooterExample: React.FunctionComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const openPanel = useConstCallback(() => setIsOpen(true));
  const dismissPanel = useConstCallback(() => setIsOpen(false));

  // This panel doesn't actually save anything; the buttons are just an example of what
  // someone might want to render in a panel footer.
  const onRenderFooterContent = useConstCallback(() => (
    <div>
      
        Save
      
      Cancel
    </div>
  ));

  return (
    <div>
      </div>

export const PanelLightDismissCustomExample: React.FunctionComponent = () => {
  const [isPanelOpen, setIsPanelOpen] = React.useState(false);
  const [isDialogVisible, setIsDialogVisible] = React.useState(false);

  const openPanel = useConstCallback(() => setIsPanelOpen(true));
  const dismissPanel = useConstCallback(() => setIsPanelOpen(false));
  const showDialog = useConstCallback(() => setIsDialogVisible(true));
  const hideDialog = useConstCallback(ev => {
    ev.preventDefault();
    setIsDialogVisible(false);
  });
  const hideDialogAndPanel = useConstCallback(() => {
    setIsPanelOpen(false);
    setIsDialogVisible(false);
  });

  return (
    <div>
      {explanation}
      <br>
      <br>
      
      </div>

export const PanelControlledExample: React.FunctionComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const openPanel = useConstCallback(() => setIsOpen(true));
  const dismissPanel = useConstCallback(() => setIsOpen(false));

  return (
    <div>
      This panel can only be closed by clicking a button inside the panel content. (Don't use this behavior unless absolutely necessary.)
      <br>
      <br>
      
      
        <p>This panel can only be closed by clicking the button below.</p></div>

export const PanelNavigationExample: React.FunctionComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const openPanel = useConstCallback(() => setIsOpen(true));
  const dismissPanel = useConstCallback(() => setIsOpen(false));

  const onRenderNavigationContent: IRenderFunction = useConstCallback((props, defaultRender) => (
    <>
      
      {// This custom navigation still renders the close button (defaultRender).
      // If you don't use defaultRender, be sure to provide some other way to close the panel.
      defaultRender!(props)}
    
  ));

  return (
    <div>
      {explanation}
      <br>
      <br>
      </div>

export const TooltipDisplayExample: React.FunctionComponent = () => {
  // Use useId() to ensure that the ID is unique on the page.
  // (It's also okay to use a plain string and manually ensure uniqueness.)
  const tooltip1Id = useId('tooltip1');
  const tooltip2Id = useId('tooltip2');

  return (
    <div>
      In some cases when a TooltipHost is wrapping <code>inline-block</code> or <code>inline</code> elements, the positioning of the Tooltip
      may be off. In these cases, it's recommended to set the TooltipHost's <code>display</code> property to <code>inline-block</code>, as
      in the following example.
      <br>
      <br>
      
        <button aria-describedby="{tooltip1Id}" style="{buttonStyle}">
          Hover for incorrect positioning
        </button>
      {' '}
      </div>

export const TooltipCustomExample: React.FunctionComponent = () => {
  // Use useId() to ensure that the ID is unique on the page.
  // (It's also okay to use a plain string and manually ensure uniqueness.)
  const tooltipId = useId('tooltip');

  return (
    
      
    
  );
};

export const TooltipDisplayExample: React.FunctionComponent = () => {
  // Use useId() to ensure that the ID is unique on the page.
  // (It's also okay to use a plain string and manually ensure uniqueness.)
  const tooltip1Id = useId('tooltip1');
  const tooltip2Id = useId('tooltip2');

  return (
    <div>
      In some cases when a TooltipHost is wrapping <code>inline-block</code> or <code>inline</code> elements, the positioning of the Tooltip
      may be off. In these cases, it's recommended to set the TooltipHost's <code>display</code> property to <code>inline-block</code>, as
      in the following example.
      <br>
      <br>
      
        <button aria-describedby="{tooltip1Id}" style="{buttonStyle}">
          Hover for incorrect positioning
        </button>
      {' '}
      </div>

export const TooltipBasicExample: React.FunctionComponent = () => {
  // Use useId() to ensure that the ID is unique on the page.
  // (It's also okay to use a plain string and manually ensure uniqueness.)
  const tooltipId = useId('tooltip');

  return (
    <div>
      
        Hover over me
      
    </div>
  );
};

export const TooltipInteractiveExample: React.FunctionComponent = () => {
  // Use useId() to ensure that the ID is unique on the page.
  // (It's also okay to use a plain string and manually ensure uniqueness.)
  const tooltipId = useId('tooltip');

  return (
    <div>
      
        Interact with my tooltip
      
    </div>
  );
};