Hudoro Dialog

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

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @hudoro/dialog

Instal package using yarn

  yarn add @hudoro/dialog

Instal package using npm

  npm i @hudoro/dialog

import package to your project

  import {Dialog, DialogBody, DialogFooter, DialogTitle} from '@hudoro/dialog'

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

import {Dialog, DialogBody, DialogFooter, DialogTitle} from "@hudoro/dialog";
import {Button} from "@hudoro/button";
import {Box} from "@hudoro/box";
import {Text} from "@hudoro/text";

const App = () => {
  const [show, setShow] = useState(false);

  const toggleShow = () => {
    setShow((prev) => !prev);
  };
  return (
    <div>
      <Button warning onClick={toggleShow}>
        show
      </Button>
      <Dialog isShow={show} onHide={toggleShow}>
        <DialogTitle danger>Are you sure dani sooo tamvan?</DialogTitle>
        <DialogBody>
          <Text
          //any text props goes here
          >
            dani is so so so tamvan
          </Text>
        </DialogBody>
        <DialogFooter>
          <Box
          //any box props goes here
          >
            <Button link onClick={toggleShow}>
              no no
            </Button>
            <Button danger>Yes Delete this</Button>
          </Box>
        </DialogFooter>
      </Dialog>
    </div>
  );
};

Props @hudoro/dialog

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

| Prop Name | Type | Value | Default | required | | :-------- | :--------- | :----------------- | :-------- | :------- | | children | ReactNode | ReactNode | ReactNode | true | | isShow | boolean | false / true | false | true | | onHide | () => void | () => {your logic} | () => {} | true |

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

| Prop Name | Type | Value | Default | required | description | | :-------- | :-------- | :--------- | :-------- | :------- | :------------------------------------------------------- | | children | ReactNode | ReactNode | ReactNode | true | "" | | info | boolean | false/true | false | false | svg with type info will appear next to the left title | | success | boolean | false/true | false | false | svg with type success will appear next to the left title | | danger | boolean | false/true | false | false | svg with type danger will appear next to the left title |

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

| Prop Name | Type | Value | Default | required | description | | :-------- | :-------- | :-------- | :-------- | :------- | :---------- | | children | ReactNode | ReactNode | ReactNode | true | "" |

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

| Prop Name | Type | Value | Default | required | description | | :-------- | :-------- | :-------- | :-------- | :------- | :---------- | | children | ReactNode | ReactNode | ReactNode | true | "" |