0.0.1-beta.4 • Published 1 year ago

@hudoro/flex v0.0.1-beta.4

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

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 NameValuerequired
size"flex-start","flex-end","center","baseline","stretch"false
justify"flex-start", "flex-end","center", "space-between","space-around", "space-evenly",false
childrenReactNodetrue
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
0.0.1-beta.3

1 year ago

0.0.1-beta.2

1 year ago

0.0.1-beta.4

1 year ago

0.0.1-beta.1

1 year ago

0.0.1-beta.0

1 year ago