sunify / React Relative Portal
Licence: mit
React component for place dropdowns outside overflow: hidden; elements
Stars: ✭ 114
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Relative Portal
Quist Ui
快应用UI组件库 https://jdsecretfe.github.io/quist-ui/
Stars: ✭ 108 (-5.26%)
Mutual labels: component
React Scroll Parallax
🔮 React components to create parallax scroll effects for banners, images or any other DOM elements
Stars: ✭ 1,699 (+1390.35%)
Mutual labels: component
Maz Ui
Stand-alone components library to build your interfaces with Vue.JS & Nuxt.JS
Stars: ✭ 109 (-4.39%)
Mutual labels: component
React Multi Select
A Multi Select component built with and for React
Stars: ✭ 111 (-2.63%)
Mutual labels: component
React Swipeable Bottom Sheet
A swipeable material's bottom sheet implementation, using react-swipeable-views
Stars: ✭ 106 (-7.02%)
Mutual labels: component
Styled Typography
Typograpy components for react and styled-components
Stars: ✭ 113 (-0.88%)
Mutual labels: component
Nukeviet
NukeViet CMS is multi Content Management System. NukeViet CMS is the 1st open source content management system in Vietnam. NukeViet was awarded the Vietnam Talent 2011, the Ministry of Education and Training Vietnam officially encouraged to use.
Stars: ✭ 113 (-0.88%)
Mutual labels: portal
Var Exporter
The VarExporter component allows exporting any serializable PHP data structure to plain PHP code. While doing so, it preserves all the semantics associated with the serialization mechanism of PHP (__wakeup, __sleep, Serializable).
Stars: ✭ 1,616 (+1317.54%)
Mutual labels: component
Polyfill Php56
This component provides functions unavailable in releases prior to PHP 5.6.
Stars: ✭ 1,470 (+1189.47%)
Mutual labels: component
Error Handler
The ErrorHandler component provides tools to manage errors and ease debugging PHP code.
Stars: ✭ 1,852 (+1524.56%)
Mutual labels: component
Particleeffectforugui
Render particle effect in UnityUI(uGUI). Maskable, sortable, and no extra Camera/RenderTexture/Canvas.
Stars: ✭ 1,941 (+1602.63%)
Mutual labels: component
Alert
⚠️ Alert is a simple notification that appears on the top of the screen.
Stars: ✭ 113 (-0.88%)
Mutual labels: component
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
};
static defaultProps = {
left: 0,
top: 0,
component: 'span',
};
...
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].