react-viewport-utils
react-viewport-utils copied to clipboard
Expose useRect `start` and `end` props
In rtl mode of the website, the right and left modifications requires some adjustments in code most of the time.
It's good practice to expose start and end instead and toggle the values based on the document mode, similar to the css properties.
.element {
position: absolute;
inset-block-start: 0; /* evaluates to top */
inset-block-end: 0; /* evaluates to bottom */
inset-inline-start: 0; /* evaluates to left in ltr and right in rtl */
inset-inline-end: 0; /* evaluates to right in ltr and left in rtl */
}
See https://css-tricks.com/building-multi-directional-layouts/