@hudoro/menu
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

Hudoro Menu

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

Screenshots

App Screenshot

Package instalation

Instal package using pnpm

  pnpm add @hudoro/menu

Instal package using yarn

  yarn add @hudoro/menu

Instal package using npm

  npm i @hudoro/menu

import package to your project

  import {
  MenuBody,
  MenuButton,
  MenuFooter,
  MenuHeading,
  MenuLists,
} from '@hudoro/menu'

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

 import {
  MenuBody,
  MenuButton,
  MenuFooter,
  MenuHeading,
  MenuLists,
} from '@hudoro/menu'



const App = () => {
  return (
    //   You can use it in two ways
    // 1 is with pattern
     <WithPattern/>

     // 2 is without pattern
     <WithOutPattern/>
  );
};

const WithPattern = () => {
    return (
<Menu position="bottom-left">
      <MenuButton>
        <button>button</button>
      </MenuButton>
      <MenuLists>
        <MenuHeading>heading</MenuHeading>
        <MenuBody>pu list you ned</MenuBody>
        <MenuFooter>footer</MenuFooter>
      </MenuLists>
    </Menu>
    )
}

const WithOutPattern = () => {
    return (
<Menu position="bottom-right">
      <MenuButton>
        <button>button</button>
      </MenuButton>
      <MenuLists>
        <div>
         put anything you want
        </div>
      </MenuLists>
    </Menu>
    )
}

Props @hudoro/menu

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

Prop Name Type Value Default required description
children ReactNode ReactNode ReactNode true any html element
position string "bottom-left" / "bottom-right" / "top-left" / "top-right" 'bottom-left' false position for menu lists

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

Prop Name Type Value Default required description
children ReactNode ReactNode ReactNode true any html element

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

Prop Name Type Value Default required description
children ReactNode ReactNode ReactNode true any html element

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

Prop Name Type Value Default required description
children ReactNode ReactNode ReactNode true any html element

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

Prop Name Type Value Default required description
children ReactNode ReactNode ReactNode true any html element

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

Prop Name Type Value Default required description
children ReactNode ReactNode ReactNode true any html element

Readme

Keywords

none

Package Sidebar

Install

npm i @hudoro/menu

Weekly Downloads

417

Version

1.0.7

License

ISC

Unpacked Size

51.3 kB

Total Files

7

Last publish

Collaborators

  • muhfikri4
  • dani_ganteng
  • prawitohudoro