rc-trigger
base abstract trigger component for react
Last updated a month ago by afc163 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install rc-trigger 
SYNC missed versions from official npm registry.

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.

Current Tags

  • 2.7.0-alpha.0                                ...           beta (a year ago)
  • 4.3.0                                ...           latest (a month ago)

107 Versions

  • 4.3.0                                ...           a month ago
  • 4.2.2                                ...           a month ago
  • 4.2.1                                ...           a month ago
  • 4.2.0                                ...           a month ago
  • 4.1.0                                ...           2 months ago
  • 4.0.2                                ...           4 months ago
  • 4.0.1                                ...           4 months ago
  • 4.0.0                                ...           4 months ago
  • 4.0.0-rc.5                                ...           5 months ago
  • 4.0.0-rc.4                                ...           6 months ago
  • 4.0.0-rc.3                                ...           6 months ago
  • 4.0.0-rc.2                                ...           6 months ago
  • 4.0.0-rc.1                                ...           6 months ago
  • 4.0.0-rc.0                                ...           6 months ago
  • 4.0.0-alpha.8                                ...           7 months ago
  • 3.0.0                                ...           7 months ago
  • 4.0.0-alpha.7                                ...           7 months ago
  • 4.0.0-alpha.6                                ...           8 months ago
  • 4.0.0-alpha.5                                ...           8 months ago
  • 4.0.0-alpha.4                                ...           9 months ago
  • 4.0.0-alpha.3                                ...           9 months ago
  • 4.0.0-alpha.2                                ...           9 months ago
  • 4.0.0-alpha.1                                ...           9 months ago
  • 4.0.0-alpha.0                                ...           9 months ago
  • 2.6.5                                ...           a year ago
  • 2.6.4                                ...           a year ago
  • 2.6.3                                ...           a year ago
  • 2.7.0-alpha.0                                ...           a year ago
  • 2.6.2                                ...           2 years ago
  • 2.6.1                                ...           2 years ago
  • 2.6.0                                ...           2 years ago
  • 3.0.0-rc.3                                ...           2 years ago
  • 3.0.0-rc.2                                ...           2 years ago
  • 2.5.4                                ...           2 years ago
  • 3.0.0-rc.1                                ...           2 years ago
  • 3.0.0-rc.0                                ...           2 years ago
  • 2.5.3                                ...           2 years ago
  • 2.5.2                                ...           2 years ago
  • 2.5.1                                ...           2 years ago
  • 2.5.0                                ...           2 years ago
  • 2.4.2                                ...           2 years ago
  • 2.4.1                                ...           2 years ago
  • 2.4.0                                ...           2 years ago
  • 2.3.4                                ...           2 years ago
  • 2.3.3                                ...           3 years ago
  • 2.3.2                                ...           3 years ago
  • 2.3.1                                ...           3 years ago
  • 2.3.0                                ...           3 years ago
  • 2.2.2                                ...           3 years ago
  • 2.2.1                                ...           3 years ago
  • 2.2.0                                ...           3 years ago
  • 2.1.0                                ...           3 years ago
  • 1.11.5                                ...           3 years ago
  • 2.0.2                                ...           3 years ago
  • 2.0.1                                ...           3 years ago
  • 2.0.0                                ...           3 years ago
  • 1.11.4                                ...           3 years ago
  • 1.11.3                                ...           3 years ago
  • 1.11.2                                ...           3 years ago
  • 1.11.1                                ...           3 years ago
  • 1.11.0                                ...           3 years ago
  • 1.10.4                                ...           3 years ago
  • 1.10.3                                ...           3 years ago
  • 1.10.2                                ...           3 years ago
  • 1.10.1                                ...           3 years ago
  • 1.10.0                                ...           3 years ago
  • 1.9.1                                ...           3 years ago
  • 1.8.4                                ...           3 years ago
  • 1.9.0                                ...           3 years ago
  • 1.8.3                                ...           3 years ago
  • 1.8.2                                ...           3 years ago
  • 1.8.1                                ...           4 years ago
  • 1.8.0                                ...           4 years ago
  • 1.7.3                                ...           4 years ago
  • 1.7.2                                ...           4 years ago
  • 1.7.1                                ...           4 years ago
  • 1.7.0                                ...           4 years ago
  • 1.6.3                                ...           4 years ago
  • 1.6.2                                ...           4 years ago
  • 1.6.1                                ...           4 years ago
  • 1.6.0                                ...           4 years ago
  • 1.5.1                                ...           4 years ago
  • 1.5.0                                ...           4 years ago
  • 1.4.4                                ...           4 years ago
  • 1.4.3                                ...           4 years ago
  • 1.4.2                                ...           4 years ago
  • 1.4.1                                ...           4 years ago
  • 1.4.0                                ...           4 years ago
  • 1.3.1                                ...           4 years ago
  • 1.3.0                                ...           4 years ago
  • 1.2.5                                ...           4 years ago
  • 1.2.4                                ...           4 years ago
  • 1.2.3                                ...           4 years ago
  • 1.2.2                                ...           4 years ago
  • 1.2.1                                ...           4 years ago
  • 1.2.0                                ...           4 years ago
  • 1.1.1                                ...           4 years ago
  • 1.1.0                                ...           4 years ago
  • 1.0.6                                ...           5 years ago
  • 1.0.5                                ...           5 years ago
  • 1.0.4                                ...           5 years ago
  • 1.0.3                                ...           5 years ago
  • 1.0.2                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
  • 0.0.0                                ...           5 years ago
Downloads
Today 10,323
This Week 49,692
This Month 23,030
Last Day 12,707
Last Week 56,893
Last Month 303,746
Dependencies (6)
Dev Dependencies (13)
Dependents (388)

Copyright 2014 - 2016 © taobao.org |