rc-trigger

rc-trigger

React Trigger Component

Browser Support

IE 8+ ✔	Chrome 31.0+ ✔	Firefox 31.0+ ✔	Opera 30.0+ ✔	Safari 7.0+ ✔

Development

npm install
npm start

Example

http://localhost:8200/examples/

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

Feature

• support ie8,ie8+,chrome,firefox,safari

install

Usage

var Trigger = require('rc-trigger');
var React = require('react');
var ReactDOM = require('react-dom')
ReactDOM.render(<Trigger align={{
  points: ['tl', 'bl'],
  offset: [0, 3]
}} trigger={['click']} popup={<span>popup</span>}>
<a href='#'>hover</a>
</Tooltip>, 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
action	string[]	['hover']	which actions cause popup shown. enum of 'hover','click','focus'
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		same as https://github.com/react-component/animate
onPopupVisibleChange	Function		call when popup visible is changed
popupVisible	boolean		whether popup is visible
defaultPopupVisible	boolean		whether popup is visible initially
popupAlign	Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align)		popup 's align config
popup	React.Element		popup content
getPopupContainer	getPopupContainer(): HTMLElement		function returning html node which will act as popup container
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

http://localhost:8200/tests/runner.html?coverage

Coverage

http://localhost:8200/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8200/tests/runner.html?coverage

License

rc-trigger is released under the MIT license.

Similar packages

Other packages similar to rc-trigger

react-tether

react-tether is a React wrapper around the Tether positioning engine. It provides similar functionality to rc-trigger for positioning and aligning elements. However, react-tether is more focused on the Tether library's API and may offer more advanced positioning options.

react-popper

react-popper is a React wrapper for the Popper.js library. It is used for the same purposes as rc-trigger, such as tooltips and popovers. react-popper leverages Popper.js for positioning, which might give it an edge in terms of positioning accuracy and performance.

react-portal-tooltip

react-portal-tooltip is a React component for creating tooltips that are appended to the body of the page. It is similar to rc-trigger in that it helps with creating floating UI elements, but it is specifically tailored for tooltips and may not offer as much flexibility for other types of overlays.