rc-trigger
Advanced tools
Package description
The rc-trigger npm package is a React component that is used for positioning and aligning popups, tooltips, dropdowns, and other floating elements relative to a target element. It provides a flexible way to control the visibility and behavior of these overlay components.
Popup Alignment
This feature allows you to align the popup content to the target element. In the code sample, the popup is aligned to the bottom left of the button when clicked, with a small offset.
{"import React from 'react';\nimport Trigger from 'rc-trigger';\nimport 'rc-trigger/assets/index.css';\n\nconst popupContent = <div>Popup Content</div>;\n\nconst Demo = () => (\n <Trigger\n action={['click']}\n popup={popupContent}\n popupAlign={{\n points: ['tl', 'bl'],\n offset: [0, 3],\n }}\n >\n <button>Click me</button>\n </Trigger>\n);\n\nexport default Demo;"}Trigger Actions
This feature allows you to specify the actions that will trigger the popup. In the code sample, the popup appears when the input field is either hovered over or focused.
{"import React from 'react';\nimport Trigger from 'rc-trigger';\nimport 'rc-trigger/assets/index.css';\n\nconst popupContent = <div>Popup Content</div>;\n\nconst Demo = () => (\n <Trigger\n action={['hover', 'focus']}\n popup={popupContent}\n popupAlign={{\n points: ['tl', 'bl'],\n offset: [0, 3],\n }}\n >\n <input placeholder='Hover or focus me'/>\n </Trigger>\n);\n\nexport default Demo;"}Built-in Animations
This feature allows you to add animations to the popup when it appears or disappears. In the code sample, the 'slide-up' animation is used when the popup is shown or hidden.
{"import React from 'react';\nimport Trigger from 'rc-trigger';\nimport 'rc-trigger/assets/index.css';\n\nconst popupContent = <div>Popup Content</div>;\n\nconst Demo = () => (\n <Trigger\n action={['click']}\n popup={popupContent}\n popupAlign={{\n points: ['tl', 'bl'],\n offset: [0, 3],\n }}\n popupAnimation='slide-up'\n >\n <button>Click me</button>\n </Trigger>\n);\n\nexport default Demo;"}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 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 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.
Readme
React Trigger Component
 |  |  |  |  |
|---|---|---|---|---|
| IE 8+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
npm install
npm start
http://localhost:8200/examples/
online example: http://react-component.github.io/trigger/examples/
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);
| 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 |
http://localhost:8200/tests/runner.html?coverage
rc-trigger is released under the MIT license.
FAQs
base abstract trigger component for react
The npm package rc-trigger receives a total of 1,071,389 weekly downloads. As such, rc-trigger popularity was classified as popular.
We found that rc-trigger demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ecma TC39 is meeting this week and has moved key ECMAScript proposals forward, advancing Deferred Import Evaluation, Error.isError(), RegExp Escaping, and Promise.try to the next stages.
Security News
Researchers have demonstrated that teams of LLM agents can exploit zero-day vulnerabilities with a 53% success rate, and the costs of using AI to do so are rapidly becoming more affordable than hiring a human penetration tester.
Security News
In an unprecedented surge, May 2024 saw the publication of over 5,000 CVEs, marking a historic milestone in cybersecurity with an average of 164 CVEs per day, nearly double the 2023 daily average.