rmc-trigger

React Trigger Component

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

name	type	default	description
popupClassName	string		additional className added to popup
destroyPopupOnHide	boolean	false	whether destroy popup when hide
getPopupClassNameFromAlign	getPopupClassNameFromAlign(align: Object):String		additional className added to popup according to align
popupStyle	Object		additional style of popup
prefixCls	String	rmc-trigger-popup	prefix class name
popupTransitionName	String		https://github.com/react-component/animate
maskTransitionName	String		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

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rmc-trigger is released under the MIT license.

Current Tags

1.0.12 ... latest (6 years ago)

rmc-trigger

Development

Example

Feature

install

Usage

API

props

Test Case

Coverage

License

Current Tags

13 Versions