import
"rsuite/dist/rsuite.min.css"
;
import { Popover, Whisper, Button } from
"rsuite"
;
import { useEffect, useRef } from
"react"
;
function
PreventOverflowContainer({ children, height = 500 }) {
const dataContainer = useRef();
const dataContent = useRef();
const conStyles = {
overflow:
'auto'
,
position:
'relative'
};
const disStyles = {
height:
'400%'
,
width:
'230%'
,
justifyContent:
'center'
,
alignItems:
'center'
,
display:
'flex'
,
flexWrap:
'wrap'
};
useEffect(() => {
dataContainer.current.scrollTop =
dataContent.current.clientHeight / 2 - 60;
dataContainer.current.scrollLeft =
dataContent.current.clientWidth / 2 -
dataContainer.current.clientWidth / 2;
}, [dataContainer, dataContent]);
return
(
<div style={{ ...conStyles, height }}
ref={dataContainer}>
<div style={disStyles} ref={dataContent}>
{children(() => dataContainer.current)}
</div>
</div>
);
}
const speaker = (
<Popover title=
"GeeksforGeeks"
style={{ width: 200 }}>
<p>Welcome to the India's no.1 coding platform.</p>
</Popover>
);
export
default
function
App() {
return
(
<div>
<div style={{ textAlign:
"center"
}}>
<h2>GeeksforGeeks</h2>
<h4 style={{ color:
"green"
}}>
React Suite Popover Container and prevent overflow
</h4>
</div>
<div style={{ padding: 20, textAlign:
"center"
}}>
<div>
<PreventOverflowContainer height={300}>
{(getContainer) => (
<Whisper
preventOverflow
trigger=
"click"
controlId=
"control-id-container"
container={getContainer}
speaker={speaker}
>
<Button appearance=
"primary"
color=
"green"
>Click</Button>
</Whisper>
)}
</PreventOverflowContainer>
</div>
</div>
</div>
);
}