Early dev stage, not ready to be used.
Styled-System-Direction
Provides a direction
function to add direction (RTL/LTR) aware props to your component, in the same way you would use style-system functions like position
or display
.
npm i styled-system-direction
Try It Out
Usage
import flexbox position from 'styled-system';import direction from 'styled-system-direction'; const Flex = styleddiv` display: flex; ` { return // A parent should have dir prop, // in a real app, you would add it to the html tag <ParentComponent ='rtl'> <Flex ="absolute" = ='1px solid red' ></Box> </Flex> ;};
dirRight
and dirBorderRight
will create 2 css classes that will look like this:
[ [
As you can see the css selectors targets the element dependending on the dir prop of the parent.