rc-trigger-plus v1.1.1

rc-trigger-plus

This trigger component added custom functionality to React Trigger Component

v1.1.1

Browser Support

| IE 8+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |

Development

npm install
npm start

Example

http://localhost:8200/examples/

Feature

• supported on IE 8+, Chrome, Firefox, and Safari

Usage

Include the default styling and then:

import React from "react";
import ReactDOM from "react-dom";
import Trigger from "rc-trigger-plus";

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

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-plus is released under the MIT license.