<ToggleLayer
renderLayer={({ isOpen, layerProps, arrowStyle, layerSide }) =>
isOpen && (
<div
ref={layerProps.ref}
className="layer"
style={{
...layerProps.style,
width: 150,
height: 100,
backgroundColor: "#e7f5ff",
borderWidth: 1,
borderColor: "#d8d6d9"
}}
>
Layer
<Arrow
style={arrowStyle}
layerSide={layerSide}
backgroundColor="#e7f5ff"
borderWidth={1}
borderColor="#d8d6d9"
roundness={0.5}
/>
</div>
)
}
placement={{
autoAdjust: true,
triggerOffset: 10
}}
>
{({ triggerRef, toggle }) => (
<button ref={triggerRef} className="toggle-btn" onClick={toggle}>
Toggle
</button>
)}
</ToggleLayer>;