Node Package Master

    @belong-ui/popover

    0.1.29 • Public • Published

    Basic Popover Usage:

    The Popover is a core UI component used to build UI elements like Dropdowns, SelectBoxes, Tooltip etc. It uses compound components and Popper.js library under the Hood.

    In this example we have built a simple Select Dropdown.

    const PopoverTarget = Popover.TARGET;
    
    const PopoverContent = Popover.CONTENT;
    
    const PopoverArrow = Popover.ARROW;
    
    const PopoverOverlay = Popover.OVERLAY;
    
    initialState = {
      isDropdownOpen: false,
      selectedItem: null,
    };
    const suggestions = ['apple', 'orange', 'banana'];
    
    <div className="styleguidist__popover-wrap">
      <Popover
        className="styleguidist__popover"
        placement="bottom-end"
      >
        <div className="styleguidist__popover-text" onClick={() => { setState({ isDropdownOpen: true }) }}>
          {state.selectedItem ? state.selectedItem : 'Select Fruit'}
        </div>
        <PopoverTarget>
          <div className="styleguidist__popover-dropdown-icon" onClick={() => { setState({ isDropdownOpen: true }) }}>
            {state.isDropdownOpen ? <i className="fa fa-chevron-up"></i> : <i className="fa fa-chevron-down"></i>}
          </div>
        </PopoverTarget>
        <PopoverContent
          isOpen={state.isDropdownOpen}
        >
          <PopoverArrow />
          <div className="styleguidist__popover-dropdown">
            {
              suggestions.map((suggestion) => (
                <p
                  className="styleguidist__popover-dropdown-item"
                  onClick={() => { setState({ selectedItem: suggestion }); }}
                >
                  {suggestion}
                </p>
              ))
            }
          </div>
        </PopoverContent>
        <PopoverOverlay
          isOpen={state.isDropdownOpen}
          onClick={() => { setState({ isDropdownOpen: false }); }}
        />
      </Popover>
    </div>

    Without Arrow. (Can be used with Input Elements).

    const PopoverTarget = Popover.TARGET;
    const PopoverContent = Popover.CONTENT;
    const PopoverOverlay = Popover.OVERLAY;
    
    initialState = {
      isDropdownOpen: false,
      selectedItem: null,
    };
    const suggestions = ['apple', 'orange', 'banana'];
    
    <div className="styleguidist__popover-wrap">
      <Popover
        className="styleguidist__popover styleguidist__popover--input"
        placement="bottom-start"
      >
        <PopoverTarget>
          <div className="styleguidist__popover-input-wrap" onClick={() => { setState({ isDropdownOpen: true }) }}>
            <div className="styleguidist__popover-text styleguidist__popover-text--input">
              {state.selectedItem ? state.selectedItem : 'Edit Fruit'}
            </div>
            <div className="styleguidist__popover-dropdown-icon">
              <i className="fa fa-pencil"></i>
            </div>
          </div>
        </PopoverTarget>
        <PopoverContent
          isOpen={state.isDropdownOpen}
        >
          <div className="styleguidist__popover-dropdown">
            {
              suggestions.map((suggestion) => (
                <p
                  className="styleguidist__popover-dropdown-item"
                  onClick={() => { setState({ selectedItem: suggestion }); }}
                >
                  {suggestion}
                </p>
              ))
            }
          </div>
        </PopoverContent>
        <PopoverOverlay
          isOpen={state.isDropdownOpen}
          onClick={() => { setState({ isDropdownOpen: false }); }}
        />
      </Popover>
    </div>

    Keywords

    none

    Install

    npm i @belong-ui/popover

    DownloadsWeekly Downloads

    73

    Version

    0.1.29

    License

    MIT

    Unpacked Size

    45.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • kaarthek
    • saurabh2112
    • theatsharma