dialui-components

mini set of react componentes

Install: npm i dialui-components

user Interface Components

• Alert
• Button
• Icon spinner
• Modal
• Notification
• Spinner
• Table

Form Components

• Checkbox
• Input
• Input tags
• Select and Multi Select
• TextArea

visit npm: npm package dialui-components. For more info about documentation visit: dialui-components

UI Components

Alert:

Function that opens alert in lazy mode

import {openAlert} from "dialui-components"

openAlert({
  message: typeMessage,
  type: typeError,
  sideX?: "right",
  sideY?: "down",
  duration?: 4000,
});

more details: Alert

Buttons:

Button component with many colors and animation styles

import {Button} from "dialui-components"

<Button
  buttonStyle="ripple"
  backgroundColor="blue-200"
  size="sm-100"
  borderRadius="r-3"
  spinner="fleas"
  onClick={() => console.log("click")}
  isLoading
>
  Send message
</Button>

more details: Button

Modal:

Function that opens modal in lazy mode

import {openModal} from "dialui-components

openModal({
  animation: "jumpToDown",
  description: "Are you sure?",
  title: "Delete user",
  type: "info",
});

more details: Modal

Notification:

import { Notification } from "dialui-components/";

const notification = 3;

<Notification
  hasNotification={totalNotifications > 0}
  size="sm"
  backgroundColor="blue-500"
>
  {totalNotifications === 0 ? "+99" : totalNotifications.toString()}
</Notification>;

more details: Notification

Table:

import {Table, TableHead, TableBody, Cell, Row, Title, } from "dialui-components/";

<Table>
  <TableHead>
    <Row backgroundColor={backgroundColor}>
      <Title>id</Title>
    </Row>
  </TableHead>
  <TableBody>
    {data.map((person) => (
      <Row backgroundColor={backgroundColor} key={person.id}>
        <Cell>{person.id}</Cell>
        <Cell>
          <Button
            buttonStyle="table"
            backgroundColor="blue-600"
            textTransform="uppercase"
          >
            edit
          </Button>
        </Cell>
      </Row>
    ))}
  </TableBody>
</Table>;

More details: Table

Spinner:

import {openAlert} from "dialui-components"

<Spinner spinnerType="squares" />

More details: Spinner

visit the complete documentation at: dialui-components