Neophobe Plebeian Mumpsimus

    rc-trigger

    5.2.10 • Public • Published

    rc-trigger


    React Trigger Component

    NPM version build status Test coverage Dependencies DevDependencies npm download bundle size

    Install

    rc-trigger

    Usage

    Include the default styling and then:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import Trigger from 'rc-trigger';
    
    ReactDOM.render((
      <Trigger
        action={['click']}
        popup={<span>popup</span>}
        popupAlign={{
          points: ['tl', 'bl'],
          offset: [0, 3]
        }}
      >
        <a href='#'>hover</a>
      </Trigger>
    ), container);

    Compatibility

    IE / Edge
    IE / Edge
    Firefox
    Firefox
    Chrome
    Chrome
    Safari
    Safari
    Electron
    Electron
    IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

    Example

    http://localhost:9001

    online example: http://react-component.github.io/trigger/

    Development

    npm install
    npm start
    

    API

    props

    name type default description
    alignPoint bool false Popup will align with mouse position (support action of 'click', 'hover' and 'contextMenu')
    popupClassName string additional className added to popup
    forceRender boolean false whether render popup before first show
    destroyPopupOnHide boolean false whether destroy popup when hide
    getPopupClassNameFromAlign getPopupClassNameFromAlign(align: Object):String additional className added to popup according to align
    action string[] ['hover'] which actions cause popup shown. enum of 'hover','click','focus','contextMenu'
    mouseEnterDelay number 0 delay time to show when mouse enter. unit: s.
    mouseLeaveDelay number 0.1 delay time to hide when mouse leave. unit: s.
    popupStyle Object additional style of popup
    prefixCls String rc-trigger-popup prefix class name
    popupTransitionName String|Object https://github.com/react-component/animate
    maskTransitionName String|Object https://github.com/react-component/animate
    onPopupVisibleChange Function call when popup visible is changed
    mask boolean false whether to support mask
    maskClosable boolean true whether to support click mask to hide
    popupVisible boolean whether popup is visible
    zIndex number popup's zIndex
    defaultPopupVisible boolean whether popup is visible initially
    popupAlign Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align) popup 's align config
    onPopupAlign function(popupDomNode, align) callback when popup node is aligned
    popup React.Element | function() => React.Element popup content
    getPopupContainer getPopupContainer(): HTMLElement function returning html node which will act as popup container
    getDocument getDocument(): HTMLElement function returning document node which will be attached click event to close trigger
    popupPlacement string use preset popup align config from builtinPlacements, can be merged by popupAlign prop
    builtinPlacements object builtin placement align map. used by placement prop
    stretch string Let popup div stretch with trigger element. enums of 'width', 'minWidth', 'height', 'minHeight'. (You can also mixed with 'height minWidth')

    Test Case

    npm test
    npm run chrome-test
    

    Coverage

    npm run coverage
    

    open coverage/ dir

    React 16 Note

    After React 16, you won't access popup element's ref in parent component's componentDidMount, which means following code won't work.

    class App extends React.Component {
      componentDidMount() {
        this.input.focus(); // error, this.input is undefined.
      }
    
      render() {
        return (
          <Trigger
            action={['click']}
            popup={<div><input ref={node => this.input = node} type="text" /></div>}
          >
            <button>click</button>
          </Trigger>
        )
      }
    }

    Consider wrap your popup element to a separate component:

    class InputPopup extends React.Component {
      componentDidMount() {
        this.props.onMount();
      }
    
      render() {
        return (
          <div>
            <input ref={this.props.inputRef} type="text" />
          </div>
        );
      }
    }
    
    class App extends React.Component {
      handlePopupMount() {
        this.input.focus(); // error, this.input is undefined.
      }
    
      render() {
        return (
          <Trigger
            action={['click']}
            popup={<InputPopup inputRef={node => this.input = node} onMount={this.handlePopupMount} />}
          >
            <button>click</button>
          </Trigger>
        )
      }
    }

    License

    rc-trigger is released under the MIT license.

    Install

    npm i rc-trigger

    DownloadsWeekly Downloads

    1,320,172

    Version

    5.2.10

    License

    MIT

    Unpacked Size

    132 kB

    Total Files

    55

    Last publish

    Collaborators

    • benjycui
    • yesmeck
    • afc163
    • yiminghe
    • zombiej