react-laag icon indicating copy to clipboard operation
react-laag copied to clipboard

[FEATURE] Get actual placement of layer

Open AlesMicin opened this issue 2 years ago • 1 comments

I create layer using following code:

const { arrowProps, triggerProps, layerProps, renderLayer, triggerBounds, layerSide } = useLayer({
    isOpen: true,
    placement: 'left-start,
    possiblePlacements: ['left-start', 'left-center', 'left-end', 'right-start', 'right-center', 'right-end'],
    auto: true,
    snap: true
});

It works well, but to be able to apply required styles on created layer, I need to know exact layer placement.

Currently I'm only able to use layerSide property which contains values of SideProp type. In my case I'm only able to distinguish between 'left' and 'right'. But I need exact placement - for example 'left-start' or 'right-end'.

Is it possible to add new property to UseLayerProps (eg. placement) which contains exact placement used to create layer? I understand that it's value makes sense only when snap property is true.

Or, is there a way how to determine exact placement from some properties from UseLayerProps? I am able to determine that '-end' was used when layerProps.style.left == triggerBounds.left. But I'm not able to distinguish between '-start' and '*-center'.

AlesMicin avatar Aug 19 '21 14:08 AlesMicin

Can you @everweij look at this feature request, please? Does it make sense to add this feature or am I able to determine exact placement without any modification of the library?

AlesMicin avatar Aug 23 '21 15:08 AlesMicin