https://github.com/react-component/trigger
Abstract React Trigger
https://github.com/react-component/trigger
Last synced: 4 months ago
JSON representation
Abstract React Trigger
- Host: GitHub
- URL: https://github.com/react-component/trigger
- Owner: react-component
- License: mit
- Created: 2015-10-29T04:49:06.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2025-08-22T21:28:35.000Z (4 months ago)
- Last Synced: 2025-08-23T15:57:53.767Z (4 months ago)
- Language: TypeScript
- Homepage: http://react-component.github.io/trigger/
- Size: 5.91 MB
- Stars: 382
- Watchers: 8
- Forks: 237
- Open Issues: 72
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# @rc-component/trigger
React Trigger Component
[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]
[![build status][github-actions-image]][github-actions-url]
[![Test coverage][codecov-image]][codecov-url]
[![bundle size][bundlephobia-image]][bundlephobia-url]
[![dumi][dumi-image]][dumi-url]
[npm-image]: http://img.shields.io/npm/v/@rc-component/trigger.svg?style=flat-square
[npm-url]: http://npmjs.org/package/@rc-component/trigger
[github-actions-image]: https://github.com/react-component/trigger/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/trigger/actions
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/trigger/master.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/react-component/trigger/branch/master
[david-url]: https://david-dm.org/react-component/trigger
[david-image]: https://david-dm.org/react-component/trigger/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/trigger?type=dev
[david-dev-image]: https://david-dm.org/react-component/trigger/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/@rc-component/trigger.svg?style=flat-square
[download-url]: https://npmjs.org/package/@rc-component/trigger
[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/trigger
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/trigger
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
[dumi-url]: https://github.com/umijs/dumi
## Install
[](https://npmjs.org/package/@rc-component/trigger)
## Usage
Include the default [styling](https://github.com/react-component/trigger/blob/master/assets/index.less#L4:L11) and then:
```js
import React from 'react';
import ReactDOM from 'react-dom';
import Trigger from '@rc-component/trigger';
ReactDOM.render(
popup}
popupAlign={{
points: ['tl', 'bl'],
offset: [0, 3],
}}
>
hover
,
container,
);
```
## Compatibility
| [
](http://godban.github.io/browsers-support-badges/)
IE / Edge | [
](http://godban.github.io/browsers-support-badges/)
Firefox | [
](http://godban.github.io/browsers-support-badges/)
Chrome | [
](http://godban.github.io/browsers-support-badges/)
Safari | [
](http://godban.github.io/browsers-support-badges/)
Electron |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## Example
http://localhost:9001
## 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 coverage
```
open coverage/ dir
## License
rc-trigger is released under the MIT license.