Rc-trigger NPM | npm.io

5.3.4 • Published 3 years ago

Install

Weekly downloads

1,394,574

License

MIT

Repository

Last release

3 years ago

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

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.

react react-component react-trigger trigger

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

@bidalgo/ui-kit @titaui/pc @bushuai/uni-test yzhantd rt-time-picker sia-stream antd-zp react-component-date g2_v587_gv587_admin jdc-rc-common test-rc-common find-react uibot-ui-antd hds-rc-select signpl signpl-test davood-react-persian-datepicker @kiwipower/time-picker ybbtestui1 lb-agora-classroom-edu-sdk @paraponera/antd addnewer-ui mingdao-web-mohodata antds xc-mobile xcmobiles @voplus/antd grossjs @igagnidz/rc-tree-select @cliffdotai/atomic onlinex-test @dibanka/demo xqshoutenn-ui @baolq/antd guree-ui rc-cascader-custom sia-antd maycur-antd luck-design-test mingdao-web-mo maycur-business @everything-registry/sub-chunk-2535 dt-library tapas-ui tapsi-components swdx t123456-antd taikitech-react-colors-picker test-iki-mini-app wit-antd wmstool wcx-picker weditorjs wowd-components wowworks-antd xa-tables xm-antd4x wym-cascader wym-tree-select wy-ufo xiaojizhicun-ui xhh-antd superset-plugin-chart-hello-world2 sun-react-ui stong-ui stpass-antd test-rc-dropdown testdpl testbhuhu super-ly thai-buddha-calendar ux-ant-rc-select @poscredit/plugin-chart-boris antd4-x jingzhi-ui jingsheng-antd jk_calendar_cn jlltd jltd jalali-rc-calendar ked-pc kedesign lanshen kts-components-antd-x3 kts-components-antd-x4 igroot hunt-ui idoll-pro idoll idm-react-antd hz-antd hz-date-picker ichintui icop-data-process ic-components infrad hzqy-date-picker hztd hdm-antd

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago