React-layout-box NPM

Live Storybook: Storybook
NPM Package: react-layout-box

Installation

npm install react-layout-box

React Container Component

A highly customizable and responsive Container component designed to handle the minimum and maximum width of its child elements. Particularly useful for readability and maintaining layout constraints.

Installation

Usage

import Container from 'react-layout-box';

<Container minWidth="200px" maxWidth="800px">
  <p>Your content here</p>
</Container>

API

Props

Prop	Type	Description
minWidth	number \| string	Minimum width of the container
maxWidth	number \| string	Maximum width of the container
children	ReactNode	The content inside the container

React Flex Component

A flexible and easy-to-use Flex component for building modern layouts with flexbox.

Usage

Here is a simple usage example:

import Flex from 'react-layout-box';

<Flex direction="row" justify="center" align="center">
  <div>Item 1</div>
  <div>Item 2</div>
</Flex>

API

Props

Prop	Type	Description
direction	'row' \| 'row-reverse' \| 'column' \| 'column-reverse' \| 'inherit' \| 'initial' \| 'unset'	Flex direction
justify	'start' \| 'center' \| 'space-between' \| 'space-around' \| 'space-evenly'	Justify content
align	'stretch' \| 'center' \| 'start' \| 'end'	Align items
gap	number \| string	Gap between items
children	ReactNode	The content inside the flex container

React Grid Component

An intuitive Grid component that simplifies the creation of grid layouts in React.

Usage

Here is a simple usage example:

import Grid from 'react-layout-box';

<Grid rows={3} columns={3}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>

API

Props

Prop	Type	Description
rows	number \| string	Number of rows
columns	number \| string	Number of columns
gap	number \| string	Gap between items
children	ReactNode	The content inside the grid container