rd-react-overlay v1.4.7
rd-react-overlay
Overlay component that allows open a component in popup for React.js.
Installation
npm i rd-react-overlay --save
Code Example
Demo
Code
First of all you'll need to add OverlayContainer, Overlay, Alignment, AlignType
to your application module.
import { OverlayContainer, Overlay, Alignment, AlignType } from 'rd-react-overlay';
After that import add visible
and alignment
states to your component.
this.state = {
visible: false,
alignment: {
target: {
horizontal: AlignType.Left,
vertical: AlignType.Bottom
},
overlay: {
horizontal: AlignType.Left,
vertical: AlignType.Top
}
}
}
Of course you need to add this states to your interface if you use TypeScript or PropTypes.
interface ComponentState {
visible?: boolean;
alignment?: Alignment;
}
After that you should add this template to component render:
<OverlayContainer>
<button type="button" onClick={() => this.setState({visible: true})}>Open popup</button>
<Overlay visible={this.state.visible}
onClickOutside={(clickedOnContainer) => this.setState({visible: clickedOnContainer})}
alignment={this.state.alignment}>
{
(left, top) =>
<div style={({position: 'absolute', top: top, left: left})}>
<ComponentThatShouldBeInPopup/>
</div>
}
</Overlay>
</OverlayContainer>
The first element button
could be any other element or elements. This element or elements will be a target for <ComponentThatShouldBeInPopup/>
that will align with.
Instead of button
element there is can be <div>hello, world</div><div>hello, again</div>
or whatever. Don't forget to add element that will triggering visible
state.
This styles <div style={({position: 'absolute', top: top, left: left})}>
generating depends on alignment
state. You can position the popup whenever you want. In this case you dont need anymore alignment
state.
{position: 'absolute' | 'relative' | 'fixed', top: number, left: number}
API Reference
Property | Type | Default | Description |
---|---|---|---|
visible | boolean | undefined | Visible state for content in the |
alignment | Alignment | defaultAlign: Alignment = {element: {horizontal: AlignType.Left,vertical: AlignType.Top},target: {horizontal: AlignType.Left,vertical: AlignType.Bottom}}; | Align popup with |
onClickOutside | (ClickedOnContainer: boolean) => void | (clickedOnContainer) => this.setState({visible: clickedOnContainer}) | Close popup if clicked out of popup and container. |
License
This project is licensed under the MIT license. See the LICENSE file for more info.