react-popover-a11y

    

Links

* Installation
* Usage
* API
* All Contributors
* Authors
* Changelog
* Contributing
* Code of Conduct

Installation

``js
$ npm i react-popover-a11y
`
or
`js
$ yarn add react-popover-a11y
`

Usage

`js
import PopoverA11y from 'react-popover-a11y'

export default class App extends Component {
constructor(...params) {
super(...params)
this.handleClose = this.handleClose.bind(this)
this.handleOpen = this.handleOpen.bind(this)
this.state = { isOpen: false }
}

handleClose() {
this.setState({ isOpen: false })
}

handleOpen() {
this.setState({ isOpen: true })
}

render() {
const { isOpen } = this.state
const content =

const trigger =

Click me

return (
bottom
right
content={content}
isOpen={isOpen}
offset={10}
onClose={this.handleClose}
onOpen={this.handleOpen}
trigger={trigger}
/>
)
}
}
`

$3

`js
import PopoverA11y, { PopoverContent } from 'react-popover-a11y'

export default class App extends Component {
constructor(...params) {
super(...params)
this.handleClose = this.handleClose.bind(this)
this.handleOpen = this.handleOpen.bind(this)
this.state = { isOpen: false }
}

handleClose() {
this.setState({ isOpen: false })
}

handleOpen() {
this.setState({ isOpen: true })
}

render() {
const { isOpen } = this.state
const content =

const trigger = (

Click me

)

return (
bottom
right
content={content}
isOpen={isOpen}
offset="-0.5rem"
onClose={this.handleClose}
onOpen={this.handleOpen}
trigger={trigger}
/>
)
}
}
`

$3


You can pass both bottom and left or top and right, for example, or
simply one of those.

$3

If you specify top and right, but the popover would open _outside_ the
window to the top and right, this component will adjust it to be _inside_ the
window – in this case, bottom and left – so that it will remain visible.

API

| Prop | Type | Required | Default | Details |
| --- | --- | --- | --- | --- |
| bottom | bool | no | none | Have popover appear at the bottom |
| content | node | yes | none | This is the popover content element. Can be a normal React node or import PopoverContent itself to override its style |
| isOpen | bool | yes | false | As a controlled component, you must pass isOpen to tell the component what to do |
| label | string | no | none | Provide a label to be used as aria-label when no appropriate trigger text is provided |
| left | bool | no | none | Have popover appear at the left |
| offset | number / CSS unit | no | 0px | Amount in pixels (or CSS unit value, like -0.5rem) for popover to be offset from trigger |
| onClose | function | yes | Function.prototype | Callback that is triggered when element should close |
| onOpen | function | yes | Function.prototype | Callback that is triggered when element should open |
| right | bool | no | none | Have popover appear at the right |
| top | bool | no | none | Have popover appear at the top |
| trigger` | node | yes | none | This is the popover trigger element |

Contributors

Thanks goes to these wonderful people (emoji key):

Robert Pearce 💻 📖 💡 🤔 ⚠️

Luke Mallory 🐛 💻

This project follows the all-contributors specification. Contributions of any kind welcome!