Nutritious Pumpkin Masses

    @trendmicro/react-popover

    0.4.0 • Public • Published

    react-popover build status Coverage Status

    NPM

    React Popover

    Demo: https://trendmicro-frontend.github.io/react-popover

    Installation

    1. Install the latest version of react and react-popover:
    npm install --save react @trendmicro/react-popover
    
    1. At this point you can import @trendmicro/react-popover and its styles in your application as follows:
    import Popover from '@trendmicro/react-popover';
    
    // Be sure to include styles at some point, probably during your bootstraping
    import '@trendmicro/react-popover/dist/react-popover.css';

    Usage

    // Basic
    <Popover show={true}>
        <Popover.Body>
            <span>Popover Top</span>
        </Popover.Body>
    </Popover>
    
    // With Header
    <Popover show={true}>
        <Popover.Header>Title</Popover.Header>
        <Popover.Body>
            <span>Popover Top</span>
        </Popover.Body>
    </Popover>
    
    // With footer
    <Popover show={true}>
        <Popover.Body>
            <span>Popover Top</span>
        </Popover.Body>
        <Popover.Footer>Footer</Popover.Footer>
    </Popover>
    
    // Set prefer place
    <Popover
        show={true}
        placement="top-left"
    >
        <Popover.Body>
            <span>Popover Top-left</span>
        </Popover.Body>
    </Popover>
    
    // Set target
    <Popover
        show={true}
        target={document.querySelector(".example-target")}
    >
        <Popover.Body>
            <span>Popover Top</span>
        </Popover.Body>
    </Popover>

    API

    Properties

    Name Type Default Description
    show Boolean false Specify whether to show the popover.
    placement String 'top' One of
    • 'top'
    • 'top-left'
    • 'top-right'
    • 'right'
    • 'right-top'
    • 'right-bottom'
    • 'bottom'
    • 'bottom-left'
    • 'bottom-right'
    • 'left'
    • 'left-top'
    • 'left-bottom'
    target Object null Target element to aligned

    License

    MIT

    Install

    npm i @trendmicro/react-popover

    DownloadsWeekly Downloads

    289

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    71 kB

    Total Files

    8

    Last publish

    Collaborators

    • trendmicro-frontend
    • cheton
    • rothpeng
    • smalltase