React Layout Library

Introduction

Before installation, you need to know that this library is in the alpha stage. This means that we will make significant and breaking changes.

OneLayout is created to just simplify creating responsive layouts. We often use these responsive styles and with this library, we can reuse them.

Getting Started

Install OneLayout library

npm i onelayout

Import components

import { Container, Row, Col } from "onelayout";

Use components inside your app

<Container>
  <Row>
    <Col size={1 / 3}>
      <Box>1 / 3</Box>
    </Col>
    <Col size="6rem">
      <Box>6rem</Box>
    </Col>
    <Col size="auto">
      <Box>Auto</Box>
    </Col>
    <Col>
      <Box>Grow</Box>
    </Col>
  </Row>
</Container>

Custom Breakpoints and Theme

There is support for ThemeProvider and you can easily override defaults. Example:

import { ThemeProvider } from "onelayout";

export default function App() {
  return (
    <ThemeProvider
      theme={{
        breakpoints: {
          sm: "576px",
          md: "768px",
          lg: "1024px",
          xl: "1280px",
          xxl: "1536px",
        },
        containerMaxWidths: {
          sm: "540px",
          md: "740px",
          lg: "996px",
          xl: "1200px",
          xxl: "1490px",
        },
      }}
    >
      ... your app ...
    </ThemeProvider>
  );
}

Examples

Containers

Columns

Custom Gap

Responsive