Intuitive-flexbox NPM

Intuitive Flexbox

Installation

   yarn add intuitive-flexbox

Implementation

import { HBox, VBox } from "intuitive-flexbox";
export default function HomePage() {
  return (
    <VBox className="h-screen bg-black py-10 text-white">
      <h1 className="mb-2">This is a VBox</h1>
      <HBox className="bg-blue-500 bg-opacity-50 py-2">
        This is an HBox
        <div className="mx-2 bg-red-500 px-2">with</div>
        <div className="mx-2 bg-green-500 px-2">multiple items</div>
      </HBox>
      <HBox className="bg-yellow-500 bg-opacity-50">This another HBox</HBox>
    </VBox>
  );
}

Props

VBox

Prop name	Type	Default value	Description
children	ReactNode	-	The content of the component
className	string	-	Additional CSS class name(s)
id	string	-	The id attribute of the component
center	boolean	false	Whether to horizontally center the children
vcenter	boolean	false	Whether to vertically center the children
hFull	boolean	false	Whether to make the component full width

HBox

Prop name	Type	Default value	Description
children	`ReactNode`	-	The content of the component
className	`string`	-	Additional CSS class name(s)
id	`string`	-	The id attribute of the component
wFull	`boolean`	`false`	Whether to make the component full width
hFull	`boolean`	`false`	Whether to make the component full height
spaceBetween	`boolean`	`false`	Whether to add space between the children
center	`boolean`	`false`	Whether to horizontally center the children
vcenter	`boolean`	`false`	Whether to vertically center the children
style	`Record<string, unknown>`	-	Additional inline styles to apply to the component
wrap	`boolean`	`false`	Whether to wrap the children onto multiple lines