@alexseitsinger/react-simple-popover

0.2.0 • Public • Published

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.

Dependents (0)

Package Sidebar

Install

npm i @alexseitsinger/react-simple-popover

Weekly Downloads

1

Version

0.2.0

License

BSD-2-Clause

Unpacked Size

164 kB

Total Files

6

Last publish

Collaborators

  • alexseitsinger