Navy Penguin Mariachi

    react-awesome-popover

    6.1.1 • Public • Published

    Starting with v5.0.0, this component is no longer based on Popper.js, which used react-popper. to use react-popper based popover you must use version 4.1.0

    React-awesome-popover

    Installation


    via NPM

    npm i react-awesome-popover

    via CDN (unpkg)

    https://unpkg.com/react-awesome-popover@latest/build/index.umd.js

    UMD library exposed as ReactAwesomePopover

    const Popover = ReactAwesomePopover;

    Example

    ReactDOM.render(
      <Popover>
        <button>The Target</button>
        <div>The content</div>
      </Popover>,
      document.body
    );

    The component supports server-side rendering

    You can also use nested popovers

    ReactDOM.render(
      <Popover>
        <button>The Target</button>
        <div>
          ...
          <Popover>
            <button>The Target</button>
            <div>
              ...
              <Popover>
                <button>The Target</button>
                <div>The content</div>
              </Popover>
              ...
            </div>
          </Popover>
          ...
        </div>
      </Popover>,
      document.body
    );

    Performing an animation

    <Popover>
      <button>Click</button>
      <Motion defaultStyle={{ opacity: 0 }} style={{ opacity: spring(1) }}>
        {style => {
          return (
            <div style={style}>
              <h3>Popover</h3>
            </div>
          );
        }}
      </Motion>
    </Popover>

    You can also use as a tooltip.

    Very simple!.

    <Popover>
      <button>The Target</button>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus error
        laudantium incidunt vitae dignissimos praesentium nesciunt,
        <Popover action="hover" placement="top">
          <b>pariatur provident natus</b>
          <div>Wow man</div>
        </Popover>
        aperiam, corporis, quo libero sapiente recusandae! Distinctio deserunt dolor
        sequi, i
      </div>
    </Popover>

    Props

    Prop Type Description Default
    arrow Boolean If false, the arrow is removed true
    placement String The placement of the popover.top-start,top-center,top-end,left-start,left-center,left-end,right-start,right-center,right-end,bottom-start,bottom-center,bottom-end auto
    action String click or hover. Supports touch event click
    onOpen Function The callback is called when the content is mounted
    onClose Function The callback is called after the content is unmounted from the dom
    open Boolean Whether the popover is visible. Passing this prop puts the popover in controlled mode. To make the popover completely manageable, you must pass the null value to the action prop false
    zIndex Number Initial number for zIndex 1000
    overlayColor String Set the background color of an overlay element rgba(0,0,0,0.5)
    arrowPropss Object Pass any prop to the div element that wraps the arrow {}
    preventDefault Boolean Cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.more false
    stopPropagation Boolean Stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed. more false

    Install

    npm i react-awesome-popover

    DownloadsWeekly Downloads

    1,335

    Version

    6.1.1

    License

    MIT

    Unpacked Size

    56.8 kB

    Total Files

    12

    Last publish

    Collaborators

    • vaheqelyan