@fluentui/react-popover

What is @fluentui/react-popover?

@fluentui/react-popover is a React component library that provides popover functionality. It allows developers to create interactive and customizable popover elements that can display additional content or information when triggered by user actions such as clicks or hovers.

What are @fluentui/react-popover's main functionalities?

Basic Popover

This code demonstrates a basic popover that is triggered by clicking a button. The popover content is displayed when the button is clicked.

import { Popover, PopoverTrigger, PopoverContent } from '@fluentui/react-popover';
import { Button } from '@fluentui/react-button';

function BasicPopover() {
  return (
    <Popover>
      <PopoverTrigger>
        <Button>Click me</Button>
      </PopoverTrigger>
      <PopoverContent>
        <div>This is the popover content</div>
      </PopoverContent>
    </Popover>
  );
}

Popover with Custom Positioning

This code demonstrates a popover with custom positioning. The popover is positioned above the button when it is triggered.

import { Popover, PopoverTrigger, PopoverContent } from '@fluentui/react-popover';
import { Button } from '@fluentui/react-button';

function CustomPositionPopover() {
  return (
    <Popover positioning={{ align: 'start', position: 'above' }}>
      <PopoverTrigger>
        <Button>Click me</Button>
      </PopoverTrigger>
      <PopoverContent>
        <div>This popover is positioned above the button</div>
      </PopoverContent>
    </Popover>
  );
}

Popover with Custom Styling

This code demonstrates a popover with custom styling. The popover content is styled with a light blue background, padding, and rounded corners.

import { Popover, PopoverTrigger, PopoverContent } from '@fluentui/react-popover';
import { Button } from '@fluentui/react-button';
import { mergeStyles } from '@fluentui/react';

const customStyles = mergeStyles({
  backgroundColor: 'lightblue',
  padding: '10px',
  borderRadius: '5px'
});

function StyledPopover() {
  return (
    <Popover>
      <PopoverTrigger>
        <Button>Click me</Button>
      </PopoverTrigger>
      <PopoverContent className={customStyles}>
        <div>This popover has custom styling</div>
      </PopoverContent>
    </Popover>
  );
}

Other packages similar to @fluentui/react-popover

react-bootstrap

React-Bootstrap is a popular library that provides Bootstrap components as React components. It includes a Popover component that offers similar functionality to @fluentui/react-popover, with easy integration and customization options.

material-ui

Material-UI is a comprehensive library of React components that implement Google's Material Design. It includes a Popover component that provides similar functionality to @fluentui/react-popover, with a focus on design consistency and ease of use.

react-tippy

React-Tippy is a lightweight library for creating tooltips and popovers in React. It offers a simple API and a variety of customization options, making it a good alternative to @fluentui/react-popover for developers looking for a more minimalistic solution.

README

@fluentui/react-popover

React Popover components for Fluent UI React

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

To import React Popover components:

import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-popover';

<Popover>
  <PopoverTrigger>
    <button>Controls popover</button>
  </PopoverTrigger>

  <PopoverSurface>
    <div className={example}>
      <h3>Popover content</h3>

      <div>This is some popover content</div>
    </div>
  </PopoverSurface>
</Popover>;