@tuv-indo/flex

Hudoro Flex

Hudoro Flex is a strict and customizable Flex component for web development projects, designed for simplicity and adherence to strict design guidelines.

Package instalation

Instal package using pnpm

  pnpm add @hudoro/flex

Instal package using yarn

  yarn add @hudoro/flex

Instal package using npm

  npm i @hudoro/flex

Usage/Examples (you can combine using icon package hudoro)

import React from "react";
import {Flex} from "@hudoro/flex";
import ReactDOM from "react-dom/client";

const App = () => (
  <div>
    <h1>Component test</h1>
    <Flex direction="row" gap="spacing-16">
      <p>asdf</p> <p>adsf</p>
    </Flex>
  </div>
);

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props @hudoro/flex

Props that you can pass to <Flex {...props} />

Prop Name	Value	required
size	"flex-start","flex-end","center","baseline","stretch"	false
justify	"flex-start", "flex-end","center", "space-between","space-around", "space-evenly",	false
children	ReactNode	true
gap	"xs","sm","md","lg","auto","spacing-0","spacing-1","spacing-2","spacing-3","spacing-4","spacing-5","spacing-6","spacing-8","spacing-10","spacing-12","spacing-16","spacing-20","spacing-24","spacing-32","spacing-40","spacing-48","spacing-56", "spacing-64",	false
direction	"row","column","sm-row", "sm-column","md-row","md-column","lg-row","lg-column","xl-row","xl-column",	false
wrap	"nowrap","wrap","wrap-reverse","initial","inherit",	false