styled-components-rtl

Allows u add ltr-rtl direction switching for your styled components

Usage no npm install needed!

<script type="module">
  import styledComponentsRtl from 'https://cdn.skypack.dev/styled-components-rtl';
</script>

README

styled-components-rtl

Allows u add ltr-rtl direction switching for your styled components

Using

import {ThemeProvider} from "styled-components"
import rtl from "styled-components-rtl";

const List = styled.div``;
const ListItem = styled.div`
    ${rtl`
        margin-left: 1rem;
    `}
`;

const theme = {
  dir: "rtl"
  // OR direction: "rtl"
};

render(
  <ThemeProvider theme={theme}>
    <List>
      <ListItem>Item 1</ListItem>
      <ListItem>Item 2</ListItem>
    </List>
  </ThemeProvider>
);

If theme.dir equal rtl instead of margin-left will be margin-right;

Contributors

Thanks goes to these wonderful people:

_{Max Kudla}	_{Anees Hikmat Abu-hamid}	_{Omar Houmz}