JSPM – w-popover@2.1.4

Package Exports

w-popover
w-popover/dist/index.esm.js
w-popover/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (w-popover) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Features

Based on React hooks
Small size, zero 3rd-party library dependencies.

Usage

import React, { useState } from 'react';
import { Popover, Tooltip } from 'w-popover';

export default function App() {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <p>
        <Popover
          placement="bottom-right"
          visible={visible}
          onClose={() => setVisible(false)}
          closeOnClickOutside
          content="This is ReactNode content."
        >
          <button onClick={() => setVisible(true)}>Anchor to trigger Popover to showup</button>
        </Popover>
      </p>

      <p>
        <Tooltip content="This is a tooltip." placement="right">
          <button>mouse over me</button>
        </Tooltip>
      </p>
    </div>
  );
}

Props Definition

type Props = {
  /** Popover display position. default: bottom */
  placement?: Placement,
  /** Trigger element，If a component been used please specify the the forwardRef to inner DOM element */
  children: React.ReactElement,
  /** Content to show */
  content?: React.ReactNode,
  /** Whether to show the popover */
  visible?: boolean,
  /** Visibility change callback */
  onVisibleChange?: (visible: boolean) => void,
  /** Whether to show arrow */
  arrow?: boolean,
  /** Whether to show close button on upper right of the popover. */
  closable?: boolean,
  /** Popover container style to apply */
  style?: React.CSSProperties,
  /** Trigger to unmount the popover */
  onClose?: () => void,
  /** Popover container css classname to apply */
  className?: string,
  /** Whether to show a mask layer below the popover.  */
  mask?: boolean,
  /** Mask style if mask is enabled. */
  maskStyle?: React.CSSProperties,
  /** Mask css className if mask is enabled. */
  maskClass?: string,
  /** Manually set a left,top offset to popover
   * type Offset = { x?: number; y?: number }; */
  offset?: Offset,
  /**
   * Whether to close the Popover when click outside area.
   * @default true
   * */
  closeOnClickOutside?: boolean,
  /**
   *  Whether to close the Popover when click mask area.
   * @default true
   * */
  closeOnMaskClick?: boolean,
  /**
   *  Whether to enable entrance transition effect.
   * @default true
   *  */
  transition?: boolean,
  /**
   *  Transition duration time. default: 220 ms
   */
  transitionDuration?: number,
  /**
   *  transitionTimingFunction. default: ease-in-out
   */
  transitionTimingFunction?: string,
};

export type SinglePlacement = 'top' | 'bottom' | 'left' | 'right';

export type Placement =
  | 'top'
  | 'left'
  | 'bottom'
  | 'right'
  | 'top-left'
  | 'top-right'
  | 'bottom-left'
  | 'bottom-right'
  | 'left-top'
  | 'left-bottom'
  | 'right-top'
  | 'right-bottom'
  | SinglePlacement;