pop-and-drop
v1.0.12
Published
Fancy popup or dropdown box for React
Downloads
6
Readme
PopAndDrop
Fancy popup or dropdown box for React
:baby_bottle:
PopAndDrop
is at experimental status.
Install
npm install --save popandrop
Live Example
Usage
PopAndDrop
allows you to pop/drop a div relative to another div without being a child of that div.
Features include full width, full height, border avoiding, custom tick render, model and non-modal modes.
Parameters
relativeTo
- ref to component or element that pop-and-drop will render relative to.visible
- will completely remove children of the pop-and-drop from the dom for low footprinttick
- call back to function that returns JSX to render tick. Example shows centered and left justified ticks.topMargin
- margin under the component we are relative to.leftMargin
- margin to try an enforce to the left of the browser windowrightMargin
- margin to try an enforce to the right of the browser windowbottomMargin
- margin to try an enforce to the bottom of the browser windowwidth
- pixels (numeric) or"full"
height
- pixels (numeric) or"full"
modal
- true/false, in modal mode, clicking outside the pop-and-drop will call theonClose
call back so you can handle close stateonModalTint
- tints/fills modal masking area ariybd the pop-and-drop to capture out of region clicks.onClose
- call back called when click happens in modal masking area
Example
import React from 'react'
import PopAndDrop from 'PopAndDrop'
import './example.css'
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
isShowing1: false,
isShowing2: false
}
this.buttonRelativeRef1 = React.createRef()
this.buttonRelativeRef2 = React.createRef()
}
// Optional callbacks to put a nice tails on our Pop-And-Drop boxes
// tick = left side of relativeTo component
// tickcenter = center of relativeTo component
// Note: check z-order in the example.css
upTick1 = (tick, tickCenter) => {
return (
<div
className="pop-and-drop-example-tick-1"
style={{
left: tickCenter - 5,
}}>
</div>
)
}
upTick2 = (tick, tickCenter) => {
return (
<div
className="pop-and-drop-example-tick-2"
style={{
left: tick + 24,
}}>
</div>
)
}
render () {
return (
<div className="pop-and-drop-example">
<div
ref={this.buttonRelativeRef1}
className="pop-and-drop-example-button"
onClick={()=>{
this.setState({isShowing1: true})
}}>
Click Me 1
</div>
<div
ref={this.buttonRelativeRef2}
className="pop-and-drop-example-button"
onClick={()=>{
this.setState({isShowing2: true})
}}>
Click Me 2
</div>
{/*
These are our popups. The PopAndDrop can contain any div, it is recommended
the inner div has a 100% width and height.
- The first PopAndDrop is full height and width with margin set backs.
- The second PopAndDrop is fixed width and height and will try to avoid the
right edge of the screen on resize by the right margin amount to avoid
popping up offscreen.
- the "tick" property points to a function that returns your tick rendering code
*/}
<PopAndDrop
relativeTo={this.buttonRelativeRef1}
visible={this.state.isShowing1}
tick={this.upTick1}
modal={true}
width="full"
height="full"
topMargin={13}
leftMargin={40}
rightMargin={40}
bottomMargin={40}
onClose={()=>{
this.setState({isShowing1: false})
}}
onModalTint="rgba(0,0,0,0.25)">
<div className="pop-and-drop-example-hello-1">
Hello #1
</div>
</PopAndDrop>
<PopAndDrop
relativeTo={this.buttonRelativeRef2}
visible={this.state.isShowing2}
tick={this.upTick2}
modal={true}
topMargin={28}
leftMargin={20}
rightMargin={40}
width={400}
height={200}
onClose={()=>{
this.setState({isShowing2: false})
}}
onModalTint="rgba(0,80,40,0.25)">
<div className="pop-and-drop-example-hello-2">
Hello #2
</div>
</PopAndDrop>
</div>
)
}
}
License
MIT
Copyright 2018, Crowd Conduct Corp.