0.0.1-beta.18 • Published 1 year ago
@hudoro/drawer v0.0.1-beta.18
Hudoro drawer
Hudoro drawer is a strict and customizable drawer component for web development projects, designed for simplicity and adherence to strict design guidelines.
Screenshots
Package instalation
Instal package using pnpm
pnpm add @hudoro/drawer
Instal package using yarn
yarn add @hudoro/drawer
Instal package using npm
npm i @hudoro/drawer
Usage/Examples (you can combine using icon package hudoro)
import React, {useState} from "react";
import {Drawer} from "@hudoro/drawer";
import ReactDOM from "react-dom/client";
const App = () => {
const [isshow, setIsshow] = useState(false);
const toggleShow = () => setIsshow((prev) => !prev);
return (
<div style={{height: "100vh", background: "black"}}>
<button onClick={toggleShow}>Component test</button>
<Drawer isShow={isshow} position="right" onHide={toggleShow} blur={false}>
<div style={{minWidth: "30vw"}}>children</div>
</Drawer>
</div>
);
};
ReactDOM.createRoot(document.getElementById("app")!).render(<App />);
Props @hudoro/drawer
Props that you can pass to <Drawer {...props} >
Prop Name | Value | required |
---|---|---|
children | ReactNode | true |
position | "top" / "right" / "bottom" / "left" | false |
isShow | boolean | true |
onHide | () => void | true |
noBg | boolean | false |
blur | boolean | false |
0.0.1-beta.7
1 year ago
0.0.1-beta.6
1 year ago
0.0.1-beta.9
1 year ago
0.0.1-beta.8
1 year ago
0.0.1-beta.10
1 year ago
0.0.1-beta.12
1 year ago
0.0.1-beta.11
1 year ago
0.0.1-beta.18
1 year ago
0.0.1-beta.5
1 year ago
0.0.1-beta.4
1 year ago
0.0.1-beta.14
1 year ago
0.0.1-beta.13
1 year ago
0.0.1-beta.16
1 year ago
0.0.1-beta.15
1 year ago
0.0.1-beta.3
1 year ago
0.0.1-beta.2
1 year ago
0.0.1-beta.1
1 year ago
0.0.1-beta.0
1 year ago