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 |