rmc-trigger

rmc-trigger

React Trigger Component
!NPM versionnpm-imagenpm-url !build statustravis-imagetravis-url !Test coveragecoveralls-imagecoveralls-url !gemnasium depsgemnasium-imagegemnasium-url !npm downloaddownload-imagedownload-url

Development

npm install
npm start

Example

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

Feature

• supported on IE 8+, Chrome, Firefox, and Safari

install

Usage

Include the default styling and then:

import React from 'react';
import ReactDOM from 'react-dom';
import Trigger from 'rmc-trigger';

ReactDOM.render((
  <Trigger
    popup={<span>popup</span>}
    popupAlign={{
      points: ['tl', 'bl'],
      offset: [0, 3]
    }}
  >
    <a href='#'>hover</a>
  </Trigger>
), container);

API

props

<thead>
<tr>
    <th style="width: 100px;">name</th>
    <th style="width: 50px;">type</th>
    <th style="width: 50px;">default</th>
    <th>description</th>
</tr>
</thead>
<tbody>
    <tr>
      <td>popupClassName</td>
      <td>string</td>
      <td></td>
      <td>additional className added to popup</td>
    </tr>
    <tr>
      <td>destroyPopupOnHide</td>
      <td>boolean</td>
      <td>false</td>
      <td>whether destroy popup when hide</td>
    </tr>
    <tr>
      <td>getPopupClassNameFromAlign</td>
      <td>getPopupClassNameFromAlign(align: Object):String</td>
      <td></td>
      <td>additional className added to popup according to align</td>
    </tr>
    <tr>
      <td>popupStyle</td>
      <td>Object</td>
      <td></td>
      <td>additional style of popup</td>
    </tr>
    <tr>
      <td>prefixCls</td>
      <td>String</td>
      <td>rmc-trigger-popup</td>
      <td>prefix class name</td>
    </tr>
    <tr>
      <td>popupTransitionName</td>
      <td>String</td>
      <td></td>
      <td>https://github.com/react-component/animate</td>
    </tr>
    <tr>
      <td>maskTransitionName</td>
      <td>String</td>
      <td></td>
      <td>https://github.com/react-component/animate</td>
    </tr>
    <tr>
      <td>onPopupVisibleChange</td>
      <td>Function</td>
      <td></td>
      <td>call when popup visible is changed</td>
    </tr>
    <tr>
      <td>mask</td>
      <td>boolean</td>
      <td>false</td>
      <td>whether to support mask</td>
    </tr>
    <tr>
      <td>maskClosable</td>
      <td>boolean</td>
      <td>true</td>
      <td>whether to support click mask to hide</td>
    </tr>
    <tr>
      <td>popupVisible</td>
      <td>boolean</td>
      <td></td>
      <td>whether popup is visible</td>
    </tr>
    <tr>
      <td>zIndex</td>
      <td>number</td>
      <td></td>
      <td>popup's zIndex</td>
    </tr>
    <tr>
      <td>defaultPopupVisible</td>
      <td>boolean</td>
      <td></td>
      <td>whether popup is visible initially</td>
    </tr>
    <tr>
      <td>popupAlign</td>
      <td>Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align)</td>
      <td></td>
      <td>popup 's align config</td>
    </tr>
    <tr>
      <td>onPopupAlign</td>
      <td>function(popupDomNode, align)</td>
      <td></td>
      <td>callback when popup node is aligned</td>
    </tr>
    <tr>
      <td>popup</td>
      <td>React.Element | function() => React.Element</td>
      <td></td>
      <td>popup content</td>
    </tr>
    <tr>
      <td>getPopupContainer</td>
      <td>getPopupContainer(): HTMLElement</td>
      <td></td>
      <td>function returning html node which will act as popup container</td>
    </tr>
    <tr>
      <td>getDocument</td>
      <td>getDocument(): HTMLElement</td>
      <td></td>
      <td>function returning document node which will be attached click event to close trigger</td>
    </tr>
    <tr>
      <td>popupPlacement</td>
      <td>string</td>
      <td></td>
      <td>use preset popup align config from builtinPlacements, can be merged by popupAlign prop</td>
    </tr>
    <tr>
      <td>builtinPlacements</td>
      <td>object</td>
      <td></td>
      <td>builtin placement align map. used by placement prop</td>
    </tr>
</tbody>

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rmc-trigger is released under the MIT license.