React primitive UI components built with styled-components and styled-system. Inspired by Rebass
Compatible with React and React-Native
npm i styled-system-flex-box
Set up your JSX layouts with <Flex />
, <Box />
, <Absolute />
, and <AbsoluteFlex />
components.
import { Flex, Box } from 'styled-flex-box'
// Or for react-native use
// import { Flex, Box } from 'styled-flex-box/native'
function AwesomeComponent() {
return (
<Flex flexDirection="row" justifyContent="space-between" width="100%">
<Box p="m">Thing One</Box>
<Box p="m">Thing Two</Box>
</Flex>
);
}
With the <Box />
component you now have access to many common props as well as any props injected by your styled-components <ThemeProvider/>
Box consumes styled-system
's space helper
<Box />
<Box p="10px" />
<Box pt="10px" />
<Box pb="10px" />
<Box py="10px" />
<Box pl="10px" />
<Box pr="10px" />
<Box px="10px" />
<Box p="10px" m="10px" />
<Box p="10px" mt="10px/>
<Box p="10px" mb="10px" />
<Box py="10px" />
<Box pl="10px" />
<Box pr="10px" />
<Box px="10px" />
If the app is consuming a ThemeContext
then the <Box />
component can also consume spacing via object-key shortcuts:
const theme = {
space: {
s: 4,
m: 8,
l: 16
}
};
<ThemeProvider theme={theme}>
<Box p="m">This has the same padding</Box>
<Box p="8px">as this</Box>
</ThemeProvider>
TODO: Document all Box, Flex, Absolute, and AbsoluteFlex props