UNPKG

box-ui-elements-mlh

Version:
47 lines (40 loc) 1.88 kB
The `PopperComponent` component is used to append an arbitrary popover panel to an on-screen element. It relies on the [popper.js project](https://popper.js.org/) and [`react-popper`](https://fezvrasta.github.io/react-popper/), which have documentation on parameters used by this component (e.g., `modifiers`). It expects two children where the first child is the reference element and the second child is the popper content. ### Examples ```js const flexCenter = { display: 'flex', alignItems: 'center', justifyContent: 'center' }; const containerStyles = { marginTop: '120px' }; const referenceStyles = { ...flexCenter, border: "1px solid black", width: '200px', height: '100px' }; const popperStyles = { ...flexCenter, width: '100px', height: '50px', backgroundColor: '#4e4e4e', color: '#fff' }; <React.Fragment> <div> <Label>Auto placement</Label> <div style={{position: 'relative'}}> <PopperComponent isOpen> <div style={referenceStyles}>Reference Element</div> <div style={popperStyles}>I'm a popper</div> </PopperComponent> </div> </div> <div style={containerStyles}> <Label>bottom-end</Label> <div style={{position: 'relative'}}> <PopperComponent isOpen placement="bottom-end"> <div style={referenceStyles}>Reference Element</div> <div style={popperStyles}>I'm a popper</div> </PopperComponent> </div> </div> <div style={containerStyles}> <Label>top-end</Label> <div style={{position: 'relative'}}> <PopperComponent isOpen placement="top-end"> <div style={referenceStyles}>Reference Element</div> <div style={popperStyles}>I'm a popper</div> </PopperComponent> </div> </div> </React.Fragment> ```