styled-system-direction

1.0.5 • Public • Published

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

Try it out on CodeSandbox

Usage

import { flexbox, position } from 'styled-system';
import { direction } from 'styled-system-direction';
 
const Flex = styled.div`
  display: flex;
  ${flexbox}
  ${position}
  ${direction}
`
 
function App() {
  return (
    // A parent should have dir prop,
    // in a real app, you would add it to the html tag
    <ParentComponent dir='rtl'>
      <Flex
        position="absolute"
        dirRight={0}
        dirBorderRight='1px solid red'
      ></Box>
    </Flex>
  );
};

dirRight and dirBorderRight will create 2 css classes that will look like this:

[dir="ltr"] .dLtAKS {
    right: 0px;
    border-right: 1px solid red;
}
 
[dir="rtl"] .dLtAKS {
    left: 0px;
    border-left: 1px solid red;
}

As you can see the css selectors targets the element dependending on the dir prop of the parent.

Related

MIT License

Package Sidebar

Install

npm i styled-system-direction

Weekly Downloads

1

Version

1.0.5

License

MIT

Unpacked Size

6.74 kB

Total Files

6

Last publish

Collaborators

  • shadcode