Getting Started

Installation

Inside your React project directory, run the following:

yarn add react-flex-ready

Or with npm:

npm install react-flex-ready

Features

  • TypeScript support
  • Flexbox ready
  • Easy to use
  • Easy to customize

Simple example


6 Columns

6 Columns

import { Flex, Item } from "react-flex-ready";
const YourApp = () => (
<Flex>
<Item col={6} colTablet={6} colMobile={12} gap={1} marginBottom={30} stretch>
<div
style={{
textAlign: "center",
width: "100%",
border: "1px solid #eee",
background: "#eee"
}}
>
<p>6 Columns</p>
</div>
</Item>
<Item col={6} colTablet={6} colMobile={12} gap={1} marginBottom={30} stretch>
<div
style={{
textAlign: "center",
width: "100%",
border: "1px solid #eee",
background: "#eee"
}}
>
<p>6 Columns</p>
</div>
</Item>
</Flex>
);

Advanced example


1

1

1

1

1

1

1

1

1

1

1

1

2

2

2

2

2

2

3

3

3

3

4

4

4

5

7

6

6

4

8

3

9

2

10

1

11

12

4

4

4

4

4

import myList from "some-list";
import { Flex, Item } from "react-flex-ready";
const YourApp = () => (
<Flex
col={4}
colTablet={6}
colMobile={12}
gap={1}
>
{myList.map(({ columns }, i) => (
<Item
key={i}
col={columns}
colTablet={6}
colMobile={12}
gap={1}
marginBottom={30}
stretch
>
<div
style={{
textAlign: "center",
width: "100%",
border: "1px solid #eee",
background: "#eee"
}}
>
<p>{columns}</p>
</div>
</Item>
))}
</Flex>
);

Sandbox

CodeSandbox