react-ruki-layouts

Columns, Rows, Stacks and more

Install

npm install --save react-ruki-layouts

Usage

import React from 'react'
import { Row, Column, Stack, Alignment } from "ruki-react-layouts";
export default function App() {
  return (
    <div className="App">
      <h5>ROW</h5>
      <Row style={{ width: "100%" }} alignment={Alignment.spaceBetween}>
        <div
          style={{ width: "100px", height: "100px", backgroundColor: "red" }}
        />

        <div
          style={{ width: "100px", height: "100px", backgroundColor: "red" }}
        />

        <div
          style={{ width: "100px", height: "100px", backgroundColor: "red" }}
        />
      </Row>
      <h5>Column</h5>
      <Column
        style={{ width: "100%", height: 400 }}
        alignment={Alignment.spaceBetween}
      >
        <div
          style={{ width: "100px", height: "100px", backgroundColor: "blue" }}
        />

        <div
          style={{ width: "100px", height: "100px", backgroundColor: "blue" }}
        />

        <div
          style={{ width: "100px", height: "100px", backgroundColor: "blue" }}
        />
      </Column>
      <h5>Stack</h5>
      <Stack
        style={{ width: "100%", height: 400 }}
        alignment={Alignment.spaceBetween}
      >
        <div
          style={{ width: "300px", height: "300px", backgroundColor: "blue" }}
        />

        <div
          style={{ width: "200px", height: "200px", backgroundColor: "red" }}
        />

        <div
          style={{ width: "100px", height: "100px", backgroundColor: "green" }}
        />
      </Stack>
    </div>
  );
}

License

MIT © Ruki