Installations

npm install rc-trigger

Pull Requests

Open

15

Total

390

Closed

186

Merged

189

Issues

Open

48

Total

105

Closed

57

Releases

153

v2.2.5

Published on 08 Nov 2024

v2.2.4

Published on 08 Nov 2024

v2.2.3

Published on 10 Sept 2024

v2.2.2

Published on 03 Sept 2024

v2.2.1

Published on 09 Aug 2024

v2.2.0

Published on 29 May 2024

View all 153 releases

Developer

react-component

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>=8.x

Typescript Support

Yes

Node Version

16.17.0

NPM Version

8.19.2 Statistics

367 Stars

535 Commits

225 Forks

9 Watching

19 Branches

56 Contributors

Updated on 08 Nov 2024

Bundle Size

67.76 kB

Minified

22.24 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (66.86%)

JavaScript (31.33%)

Less (1.81%)

Total Downloads

Cumulative downloads

Total Downloads

429,353,433

Last day

-5.4%

237,619

Compared to previous day

Last week

1.7%

1,341,200

Compared to previous week

Last month

3.6%

5,690,741

Compared to previous month

Last year

-24.4%

69,941,867

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

5

@babel/runtime classnames rc-align rc-motion rc-util

Peer Dependencies

2

react react-dom

Dev Dependencies

18

@testing-library/jest-dom @testing-library/react @types/classnames @types/jest @types/react @types/react-dom cross-env dumi eslint father less np rc-test react react-dom regenerator-runtime typescript @rc-component/father-plugin

Versions

@rc-component/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-component/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,
17);

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

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.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Maintained

Determines if the project is "actively maintained".

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

10

SAST

Determines if the project uses static code analysis.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

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

5

/10

Last Scanned on 2024-11-18

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