@hudoro/menu
v1.0.7
Published
menu component for Hudoro UI
Downloads
1,216
Readme
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
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 |