PopOver
PopOver is a component which pop over content when clicked on its children
and show data inside content
prop.
Example
Live Editor
function PopOverFuntion() { const [dateRange, setDateRange] = useState({ startDate: null, endDate: null }); return ( <PopOver content={ <DateRangePicker startDate={dateRange.startDate} endDate={dateRange.endDate} onChange={(startDate, endDate) => { setDateRange({ startDate, endDate }); }} currentMonthPosition="right" /> } > <Button label="Click me!" /> </PopOver> ) }
Result
Loading...
Variants
Callbacks
We also have support for callback on show or hide popover, can be accessed using onShow
and onHide
props.
Live Editor
<PopOver content={"Hello World!"} onShow={() => console.log(`Showing`)} onHide={() => console.log(`Hiding`)} > <Button label="Click me!" /> </PopOver>
Result
Loading...
Disabled
You can disable the pop over when clicked using the disabled
prop.
Live Editor
<PopOver content={<p> Hello!!</p>} disabled > <Button label="Click me!" /> </PopOver>
Result
Loading...
Open and setOpen
We also have support for controlling the PopOver using the open
and setOpen
props.
Live Editor
function PopOverFuntion() { const [dateRange, setDateRange] = useState({ startDate: null, endDate: null }); const [isOpen, setIsOpen] = useState(false); return ( <PopOver content={ <div> <DateRangePicker startDate={dateRange.startDate} endDate={dateRange.endDate} onChange={(startDate, endDate) => { setDateRange({ startDate, endDate }); }} currentMonthPosition="right" /> <Button label="Cancel" onClick={() => setIsOpen(false)} css={{ display: "block" }} /> </div> } open={isOpen} setOpen={setIsOpen} > <Button label="Click me!" onClick={()=>setIsOpen(true)} /> </PopOver> ) }
Result
Loading...
Placement
We also have support for placing the popover, can be accessed using placement
prop, default to bottom-start
.
Live Editor
<PopOver content={<Input placeholder="Input" />} placement="top" > <Button label="Click me!" /> </PopOver>
Result
Loading...
Props
Name | Type | Default |
---|---|---|
content * Array of Items in the pop-over menu |
| — |
disabled |
| false |
children Trigger for the Menu (e.g. a <Button/>) |
| — |
open The prop that allows to control PopOver open state outside of the component |
| — |
setOpen Callback that allows to set PopOver open state e.g. when clicking on trigger element |
| — |
onShow |
| — |
onHide |
| — |
placement |
| "bottom-start" |
popOverStyle CSS props to style the component |
| — |
popoverTestId A test id to be added as "data-testid" attribute to PopOver container for testing purposes |
| — |
isFullWidthTrigger Allows the trigger to take the available width. Internal use only! |
| — |
isHoverOpen The prop that allows to open Popover by hovering on the element |
| false |
setTriggerEvent The callback that allows to set the event name is triggered. |
| — |
offset Allows to displace a popover element from its reference element. |
| "[0, Number(Spacing5.split('px')[0])]" |
css Add custom styles to this component. Use with caution. Learn more here: Link |
| — |
inputFieldCss |
| — |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
* - the prop is required. |