Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@fluentui/react-popover

Package Overview
Dependencies
Maintainers
12
Versions
944
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fluentui/react-popover

Popover component for Fluent UI

  • 0.0.0-nightly-20241128-0406.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
230K
increased by12.86%
Maintainers
12
Weekly downloads
 
Created

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

FAQs

Package last updated on 28 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc