React relative portal
React component for place dropdown-like components outside overflow: hidden; sections
Installation
npm install react-relative-portal --save
Example
import React from 'react';
import RelativePortal from 'react-relative-portal';
export default class DropdownLink extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false,
};
this._setShowAsyncTimer = null;
this._handleShow = () => {
this._setShowAsync(true);
};
this._handleHide = () => {
this._setShowAsync(false);
};
}
componentWillUnmount() {
// Prevent the asynchronous `setState` call after unmount.
clearTimeout(this._setShowAsyncTimer);
}
/**
* Changes the dropdown show/hide state asynchronously.
*
* Need to change the dropdown state asynchronously,
* otherwise the dropdown gets immediately closed
* during the dropdown toggle's `onClick` which propagates to `onOutClick`.
*/
_setShowAsync(show) {
// Prevent multiple asynchronous `setState` calls, jsut the latest has to happen.
clearTimeout(this._setShowAsyncTimer);
this._setShowAsyncTimer = setTimeout(() => {
this.setState({ show: show });
}, 0);
}
render() {
const { show } = this.state;
return (
<div>
<button onClick={show ? this._handleHide : this._handleShow}>
Dropdown toggle
</button>
<RelativePortal
component="div"
left={0}
top={10}
onOutClick={show ? this._handleHide : null}
>
{show &&
<div style={{ padding: 10, backgroundColor: '#FFF' }}>
Dropdown content
</div>
}
</RelativePortal>
</div>
);
}
}
Props
export default class RelativePortal extends React.Component {
static propTypes = {
right: PropTypes.number, // set right offset from current position. If undefined portal positons from left
left: PropTypes.number, // set left offset from current position. If `right` prop is set, `left` ignores
fullWidth: PropTypes.bool, // enables you to set both left and right portal positions
top: PropTypes.number, // set top offset from current position
children: PropTypes.any.isRequired, // portal content
onOutClick: PropTypes.func, // called when user click outside portal element
component: PropTypes.string.isRequired, // dom tagName
componentClass: PropTypes.string, // dom class for tagName
};
static defaultProps = {
left: 0,
top: 0,
component: 'span',
};
...
}