@rc-component/trigger
v3.9.0TypeScript
base abstract trigger component for react
2.2M/weekUpdated 3 weeks agoMITUnpacked: 208.4 KB
Published by zombiej
npm install @rc-component/trigger@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]: https://img.shields.io/npm/v/@rc-component/trigger.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@rc-component/trigger
[github-actions-image]: https://github.com/react-component/trigger/actions/workflows/main.yml/badge.svg
[github-actions-url]: https://github.com/react-component/trigger/actions/workflows/main.yml
[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
Usage
Include the default styling and then:
``js
import React from 'react';
import ReactDOM from 'react-dom';
import Trigger from '@rc-component/trigger';
ReactDOM.render(
popup={popup}
popupAlign={{
points: ['tl', 'bl'],
offset: [0, 3],
}}
>
hover
,
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
Development
`
npm install
npm start
API
$3
| 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 | 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.