https://github.com/malcodeman/react-popover

The Popover component displays floating content in relation to a target.
https://github.com/malcodeman/react-popover

headless popover react react-hooks

Last synced: 21 days ago
JSON representation

The Popover component displays floating content in relation to a target.

• Host: GitHub
• URL: https://github.com/malcodeman/react-popover
• Owner: malcodeman
• License: mit
• Created: 2020-03-25T19:21:35.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-03-04T10:26:56.000Z (almost 2 years ago)
• Last Synced: 2024-11-16T02:19:05.266Z (about 1 month ago)
• Topics: headless, popover, react, react-hooks
• Language: TypeScript
• Homepage: http://react-popover-storybook.surge.sh
• Size: 723 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• my-awesome-repos - react-popover - The Popover component. (Packages)

README

        
# [react-popover](http://react-popover-storybook.surge.sh)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/malcodeman/react-popover/blob/master/LICENSE)

[![npm](https://img.shields.io/npm/v/@malcodeman/react-popover)](https://www.npmjs.com/package/@malcodeman/react-popover)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

The Popover component displays floating content in relation to a target. Popovers appear either at the top, bottom, left or right of their target. The preferred and default side is the bottom. Popovers use smart positioning if there is not enough space.

## Getting started

```sh

yarn add @malcodeman/react-popover

# or

npm install --save @malcodeman/react-popover

```

```jsx

import React from "react";

import { StatefulPopover } from "@malcodeman/react-popover";

function App() {

  return (

     
PopoverContent
}>

      Trigger Popover

    

  );

}


export default App;

```

## Stateless example

```jsx

import React from "react";

import { Popover } from "@malcodeman/react-popover";

function App() {

  const [isOpen, setIsOpen] = React.useState(false);

  return (

     
PopoverContent
}>

       setIsOpen(!isOpen)}>Trigger Popover

    

  );

}


export default App;

```

## License

[MIT](./LICENSE)