React Flex Layout
React components for creating responsive flex layout inspired by @angular/flex-layout
Install
npm i -s react-flexylayout
API
The api provides 3 components: FlexProvider, FlexRow, , FlexItem
FlexProvider
is just the simple provider you need to wrap around
FlexRow
is the row or container around your items
FlexItem
is a single item inside a FlexRow
FlexRow properties
- layout: Defines the flow order of child items within a flexbox container
<FlexRow layout="row" />
- gap: Defines if child items within a flexbox container should have a gap
<FlexRow gap="10px" />
- align: Defines how flexbox items are aligned according to both the main-axis and the cross-axis, within a flexbox container
<FlexRow align="flex-start stretch" />
- element: you can specify the html element of FlexRow by default is
div
FlexItem properties
- size: This markup specifies the resizing of its host element within a flexbox container flow
<FlexItem size="50%" />
- align: Defines how flexbox items are aligned according to both the main-axis and the cross-axis, within a flexbox container
<FlexItem align="flex-start stretch" />
- offset: Offset a flexbox item in its parent container flow layout
<FlexItem offset="15px" />
- order: Defines the order of a flexbox item
<FlexItem order="2" />
- fill: Maximizes width and height of element in a layout container
<FlexItem fill />
- element: you can specify the html element of FlexItem by default is
div
Responsive API
Out of the box the componet provides fallowing breakpoints
- xs: "screen and (max-width: 599px)"
- sm: "screen and (min-width: 600px) and (max-width: 959px)"
- md: "screen and (min-width: 960px) and (max-width: 1279px)"
- lg: "screen and (min-width: 1280px) and (max-width: 1919px)"
- xl: "screen and (min-width: 1920px) and (max-width: 5000px)"
All props have according responsive version, when responsive version is not provided it uses default one.
The sintaxis for those properties is [prop][breakpoint]
like so sizeXs
( notice the uppercase of the breakpoint )
Example:
<FlexItem size="50%" sizeXs="100%" sizeXl="25%" />
Example
import { FlexRow, FlexProvider, FlexItem } from "react-flexlayout";
function App() {
return (
<FlexProvider>
<FlexRow layout="row wrap" gap="10px">
<FlexItem size="80px" sizeXs="50%" order="2" orderXs="1">
Item 1
</FlexItem>
<FlexItem size="80px" sizeXs="50%" order="1" orderXs="2">
Item 2
</FlexItem>
<FlexItem size="50px" sizeXs="50%" align="end">
Item 3
</FlexItem>
</FlexRow>
</FlexProvider>
);
}
Custom breakpoints
You can provide a config object to specify custom sizes and names for your media query breakpoints:
- queries: Object containign media queries
- behaviour: One of "replace" or "overrider", the default is replace.
- override the whole default media queries has been overrided.
- replace Its only update / append new media queries to default ones
Example
const config = {
queries: {
xs: "screen and (max-width: 700px)",
sm: "screen and (min-width: 701px) and (max-width: 959px)",
},
behaviour: "replace",
};
<FlexProvider config={config}>
<App />
</FlexProvider>
ToDo
- Add types