react-styled-layout v1.0.4
React-Styled-Layout
React-Styled-Layout is a React Library built on type of styled components that combines the flexibility of css flexbox's with the responsiveness of the bootstrap grid system to give you everything you need to quickly build responsive layouts for your pages and components.
Getting Started
yarn add react-styled-layout
# or
npm install react-styled-layout
Basic Components
There are 2 basic components exported from react-styled-layout
the FlexBox
and the FlexItem
. The FlexBox
component can be used to configured flexbox containers that contain other FlexBox
components or FlexItem
's.
The FlexItem
component is meant to be used as columns that can adjust to the users device width. By default the columns are based on a 12 column system but can be adjusted.
Example Usage
Horizontal Columns
Below is an example of using the FlexBox
component in conjuction with the FlexItem
. We set up a 3 column grid where the widths of each column
are dynamically adjusted based on the users screen size.
import { FlexBox, FlexItem } from "react-styled-layout";
const MyComponent = () => {
return (
<FlexBox background="#efefef">
<FlexItem xs={6} md={2} xl={4} padding={20}>
Column 1
</FlexItem>
<FlexItem xs={3} md={6} xl={4} padding={20}>
Column 2
</FlexItem>
<FlexItem xs={3} md={4} xl={4} padding={20}>
Column 3
</FlexItem>
</FlexBox>
);
};
Grid System
Below is an example of using the FlexBox
component in conjuction with the FlexItem
to create a responsive grid system.
import { HorizontalFlexBox, FlexItem } from "react-styled-layout";
const MyComponent = () => {
return (
<HorizontalFlexBox
flexWrap="wrap"
background="#efefef"
width="100%"
height="100%"
>
{new Array(20).fill(null).map((_, i) => (
<FlexItem sm={12} md={6} lg={4} xl={3} initial={3}>
Tile {i + 1}
</FlexItem>
))}
</HorizontalFlexBox>
);
};
Card With Header, Content and footer
Below is an example of using the FlexBox
component in conjuction with the FlexItem
to build a card component
that has a header, content and footer.
import { HorizontalFlexBox, FlexItem } from "react-styled-layout";
const MyComponent = () => {
return (
<VerticalFlexBox
flexWrap="wrap"
background="#ffffff"
width={300}
height={200}
justifyContent="space-between"
padding={12}
>
<HorizontalFlexBox>Header</HorizontalFlexBox>
<FlexBox flex={1}>Content</FlexBox>
<FlexBox>Footer</FlexBox>
</VerticalFlexBox>
);
};