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.