npmpackage.info

Gathering detailed insights and metrics for @titaui/rc-trigger

@titaui/rc-trigger - 5.2.5-beta.3 | npmpackage.info

@titaui/rc-trigger

Abstract React Trigger

5.2.5-beta.3

382

MIT

TypeScript

131.97 kB

4.9

Installations

npm install @titaui/rc-trigger

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Min. Node Version

>=8.x

Node Version

14.18.3

NPM Version

6.14.15 Pull Requests

Open

21

Total

448

Closed

222

Merged

205

Issues

Open

50

Total

109

Closed

59

Releases

162

@rc-component/trigger@3.5.0

Updated on Jul 15, 2025

v2.2.7

Updated on Jun 17, 2025

@rc-component/trigger@3.4.1

Updated on Jun 17, 2025

@rc-component/trigger@3.4.0

Updated on May 15, 2025

@rc-component/trigger@3.3.0

Updated on May 14, 2025

@rc-component/trigger@3.2.0

Updated on Mar 25, 2025

View All 162 releases

Languages

TypeScript

JavaScript

Less

TypeScript (68.42%)

JavaScript (29.49%)

Less (2.09%)

Developer

react-component

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

382 Stars

558 Commits

234 Forks

8 Watchers

23 Branches

57 Contributors

Updated on Jul 15, 2025

Maintainers

View All 57 Contributors

Package Meta Information

Latest Version

5.2.5-beta.3

Package Id

@titaui/rc-trigger@5.2.5-beta.3

Unpacked Size

131.97 kB

Size

20.29 kB

File Count

NPM Version

6.14.15

Node Version

14.18.3

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

rc-trigger

React Trigger Component

Install

Usage

Include the default styling and then:

1import React from 'react';
2import ReactDOM from 'react-dom';
3import Trigger from 'rc-trigger';
4
5ReactDOM.render((
6  <Trigger
7    action={['click']}
8    popup={<span>popup</span>}
9    popupAlign={{
10      points: ['tl', 'bl'],
11      offset: [0, 3]
12    }}
13  >
14    <a href='#'>hover</a>
15  </Trigger>
16), 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.

1class App extends React.Component {
2  componentDidMount() {
3    this.input.focus(); // error, this.input is undefined.
4  }
5
6  render() {
7    return (
8      <Trigger
9        action={['click']}
10        popup={<div><input ref={node => this.input = node} type="text" /></div>}
11      >
12        <button>click</button>
13      </Trigger>
14    )
15  }
16}

Consider wrap your popup element to a separate component:

1class InputPopup extends React.Component {
2  componentDidMount() {
3    this.props.onMount();
4  }
5
6  render() {
7    return (
8      <div>
9        <input ref={this.props.inputRef} type="text" />
10      </div>
11    );
12  }
13}
14
15class App extends React.Component {
16  handlePopupMount() {
17    this.input.focus(); // error, this.input is undefined.
18  }
19
20  render() {
21    return (
22      <Trigger
23        action={['click']}
24        popup={<InputPopup inputRef={node => this.input = node} onMount={this.handlePopupMount} />}
25      >
26        <button>click</button>
27      </Trigger>
28    )
29  }
30}

License

rc-trigger is released under the MIT license.

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

Score

4.9

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@titaui/rc-trigger

Installations

Developer Guide

No

CommonJS

>=8.x

14.18.3

6.14.15

Pull Requests

21

448

222

205

Issues

50

109

59

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

rc-trigger

Install

Usage

Compatibility

Example

Development

API

props

Test Case

Coverage

React 16 Note

License

10

10

10

10

10

7

2

0

0

0

0

0

0

4.9

/10