SimplePopover

Extends React.Component

A simple popover element.

Parameters

• props object
  • props.isPopoverVisible boolean Determines if the popover is visible or not.
  • props.setPopoverVisible function The function to invoke to change the isPopoverVisible value.
  • props.popoverMessage string The text string to display in the popover.
  • props.popoverStyle object Extra css styles to apply to the popover. (optional, default {})
  • props.popoverOrigin string The direction that the popover message is displayed from. (optional, default right)
  • props.children function The content to display which triggers a popover.

Examples

import React from "react"
import { connect } from "react-redux"
import { SimplePopover } from "@alexseitsinger/react-simple-popover"

const App = ({ isPopoverVisible, setPopoverVisible, ...props }) => {
 return (
   <SimplePopover
     isPopoverVisible={isPopoverVisible}
     setPopoverVisible={setPopoverVisible}
     popoverMessage={"This is the text that gets displayed"}>
     <div>This is the content that has a popover.</div>
   </SimplePopover>
 )
}

const mapDispatch = dispatch => ({
  setPopoverVisible: bool => dispatch(setPopoverVisible(bool)),
})

const mapState = state => ({
  isPopoverVisible: state.app.isPopoverVisible,
})

export default connect(mapState, mapDispatch)(App)

Returns function A component.