Socket
Socket
Sign inDemoInstall

rc-trigger

Package Overview
Dependencies
14
Maintainers
5
Versions
154
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-trigger

base abstract trigger component for react


Version published
Maintainers
5
Weekly downloads
1,309,316
decreased by-10.35%

Weekly downloads

Package description

What is rc-trigger?

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.

What are rc-trigger's main functionalities?

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;"}

Other packages similar to rc-trigger

Readme

Source

rc-trigger


React Trigger Component

NPM version build status Test coverage Dependencies DevDependencies npm download bundle size dumi

Install

rc-trigger

Usage

Include the default styling and then:

import React from 'react';
import ReactDOM from 'react-dom';
import Trigger from 'rc-trigger';

ReactDOM.render((
  <Trigger
    action={['click']}
    popup={<span>popup</span>}
    popupAlign={{
      points: ['tl', 'bl'],
      offset: [0, 3]
    }}
  >
    <a href='#'>hover</a>
  </Trigger>
), container);

Compatibility

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
IE11, Edgelast 2 versionslast 2 versionslast 2 versionslast 2 versions

Example

http://localhost:9001

online example: http://react-component.github.io/trigger/

Development

npm install
npm start

API

props

nametypedefaultdescription
alignPointboolfalsePopup will align with mouse position (support action of 'click', 'hover' and 'contextMenu')
popupClassNamestringadditional className added to popup
forceRenderbooleanfalsewhether render popup before first show
destroyPopupOnHidebooleanfalsewhether destroy popup when hide
getPopupClassNameFromAligngetPopupClassNameFromAlign(align: Object):Stringadditional className added to popup according to align
actionstring[]['hover']which actions cause popup shown. enum of 'hover','click','focus','contextMenu'
mouseEnterDelaynumber0delay time to show when mouse enter. unit: s.
mouseLeaveDelaynumber0.1delay time to hide when mouse leave. unit: s.
popupStyleObjectadditional style of popup
prefixClsStringrc-trigger-popupprefix class name
popupTransitionNameString|Objecthttps://github.com/react-component/animate
maskTransitionNameString|Objecthttps://github.com/react-component/animate
onPopupVisibleChangeFunctioncall when popup visible is changed
maskbooleanfalsewhether to support mask
maskClosablebooleantruewhether to support click mask to hide
popupVisiblebooleanwhether popup is visible
zIndexnumberpopup's zIndex
defaultPopupVisiblebooleanwhether popup is visible initially
popupAlignObject: alignConfig of [dom-align](https://github.com/yiminghe/dom-align)popup 's align config
onPopupAlignfunction(popupDomNode, align)callback when popup node is aligned
popupReact.Element | function() => React.Elementpopup content
getPopupContainergetPopupContainer(): HTMLElementfunction returning html node which will act as popup container
getDocumentgetDocument(): HTMLElementfunction returning document node which will be attached click event to close trigger
popupPlacementstringuse preset popup align config from builtinPlacements, can be merged by popupAlign prop
builtinPlacementsobjectbuiltin placement align map. used by placement prop
stretchstringLet 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.

class App extends React.Component {
  componentDidMount() {
    this.input.focus(); // error, this.input is undefined.
  }

  render() {
    return (
      <Trigger
        action={['click']}
        popup={<div><input ref={node => this.input = node} type="text" /></div>}
      >
        <button>click</button>
      </Trigger>
    )
  }
}

Consider wrap your popup element to a separate component:

class InputPopup extends React.Component {
  componentDidMount() {
    this.props.onMount();
  }

  render() {
    return (
      <div>
        <input ref={this.props.inputRef} type="text" />
      </div>
    );
  }
}

class App extends React.Component {
  handlePopupMount() {
    this.input.focus(); // error, this.input is undefined.
  }

  render() {
    return (
      <Trigger
        action={['click']}
        popup={<InputPopup inputRef={node => this.input = node} onMount={this.handlePopupMount} />}
      >
        <button>click</button>
      </Trigger>
    )
  }
}

License

rc-trigger is released under the MIT license.

Keywords

FAQs

Last updated on 24 Nov 2022

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc