import
"rsuite/dist/rsuite.min.css"
;
import { CheckPicker } from
"rsuite"
;
import { useEffect, useRef } from
"react"
;
const data = [
"Java"
,
"C++"
,
"DSA"
,
"Web Development"
,
"Android Development"
,
].map((item) => ({
label: item,
value: item,
}));
function
PreventOverflowContainer({
children, height = 300, }) {
const container = useRef();
const dataContent = useRef();
const containerStyle = {
overflow:
'auto'
,
position:
'relative'
};
const dataStyle = {
height:
'400%'
,
width:
'230%'
,
justifyContent:
'center'
,
alignItems:
'center'
,
display:
'flex'
,
flexWrap:
'wrap'
};
useEffect(() => {
container.current.scrollTop =
dataContent.current.clientHeight / 2 - 60;
container.current.scrollLeft =
dataContent.current.clientWidth / 2 -
container.current.clientWidth / 2;
}, [container, dataContent]);
return
(
<div style={{ ...containerStyle, height }}
ref={container}>
<div style={dataStyle} ref={dataContent}>
{children(() => container.current)}
</div>
</div>
);
}
export
default
function
App() {
return
(
<div>
<div style={{ textAlign:
"center"
}}>
<h2>GeeksforGeeks</h2>
<h4 style={{ color:
"green"
}}>
React Suite CheckPicker Container
and prevent overflow
</h4>
</div>
<div style={{ padding: 20, textAlign:
"center"
}}>
<PreventOverflowContainer>
{getContainer => (
<CheckPicker
preventOverflow
placement={
'bottomStart'
}
style={{ width: 224 }}
container={getContainer}
data={data}
/>
)}
</PreventOverflowContainer>
</div>
</div>
);
}