@rc-component/trigger

What is @rc-component/trigger?

@rc-component/trigger is a React component library that provides a flexible and customizable way to manage trigger actions for popups, tooltips, and other overlay elements. It allows developers to control the behavior and positioning of these elements with ease.

What are @rc-component/trigger's main functionalities?

Basic Trigger

This feature demonstrates a basic trigger that shows a popup when the button is clicked. The `action` prop specifies the trigger action, and the `popup` prop defines the content of the popup.

import React from 'react';
import Trigger from '@rc-component/trigger';

const BasicTrigger = () => (
  <Trigger
    action={['click']}
    popup={<div>Popup Content</div>}
  >
    <button>Click me</button>
  </Trigger>
);

export default BasicTrigger;

Hover Trigger

This feature demonstrates a trigger that shows a popup when the button is hovered over. The `action` prop is set to `hover` to enable this behavior.

import React from 'react';
import Trigger from '@rc-component/trigger';

const HoverTrigger = () => (
  <Trigger
    action={['hover']}
    popup={<div>Hover Popup Content</div>}
  >
    <button>Hover over me</button>
  </Trigger>
);

export default HoverTrigger;

Controlled Trigger

This feature demonstrates a controlled trigger where the visibility of the popup is managed by the component's state. The `popupVisible` prop is used to control the visibility of the popup.

import React, { useState } from 'react';
import Trigger from '@rc-component/trigger';

const ControlledTrigger = () => {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setVisible(!visible)}>Toggle Popup</button>
      <Trigger
        popupVisible={visible}
        popup={<div>Controlled Popup Content</div>}
      >
        <span>Controlled Trigger</span>
      </Trigger>
    </div>
  );
};

export default ControlledTrigger;

Other packages similar to @rc-component/trigger

react-popper

react-popper is a React wrapper around Popper.js, a library used to position poppers (floating elements) in web applications. It provides similar functionality for managing the positioning and behavior of tooltips, popovers, and other overlay elements. Compared to @rc-component/trigger, react-popper focuses more on positioning and less on the trigger actions.

react-tooltip

react-tooltip is a simple and customizable tooltip component for React. It allows developers to easily add tooltips to their applications with various customization options. While it provides tooltip functionality similar to @rc-component/trigger, it is more specialized and does not offer the same level of flexibility for other types of popups or overlay elements.

rc-tooltip

rc-tooltip is another React component library from the same authors as @rc-component/trigger. It focuses specifically on tooltip functionality, providing a simple and customizable way to add tooltips to React applications. It shares some similarities with @rc-component/trigger but is more specialized for tooltip use cases.

README

rc-trigger

React Trigger Component

Install

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	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.

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.