rc-trigger
React Trigger Component
Install
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 | 
Firefox | 
Chrome | 
Safari | 
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.
