Dawuti React Utils

Dawuti React Utils is a collection of components and utilities for React that simplify web application development.

Installation

To install the library, you can use npm or yarn:

npm install dawuti-react-utils

Usage

DWIcon

The DWIcon component is used to display icons in your application. It supports various icon types and can be customized with different sizes and colors.

Props

• url (string): SVG url

Usage

import React from "react";
import { DWIcon } from "dawuti-react-utils/icon";

const App = () => {
  return (
    <div>
      <DWIcon url="svg/chevron-down.svg" />
    </div>
  );
};

export default App;

DWDialog

The DWDialog component is a modal dialog that can be controlled via references or external state.

import React, { useRef, useState } from "react";
import { DWDialog, type DialogRef } from "dawuti-react-utils/dialog";

const App = () => {
  const dialogRef = useRef < DialogRef > null;
  const [dialogOpen, setDialogOpen] = useState(false);
  const [dialogAccOpen, setDialogAccOpen] = useState(false);

  return (
    <div>
      {/* Usage with reference */}
      <button onClick={() => dialogRef.current?.open()}>
        Open dialog with ref
      </button>

      <DWDialog ref={dialogRef}>Dialog content</DWDialog>

      {/* Usage with outer state */}
      <button onClick={() => setDialogOpen(true)}>
        Open dialog with state
      </button>
      <DWDialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
        Dialog content
      </DWDialog>

      {/* Using accesibility props */}
      <button onClick={() => setDialogAccOpen(true)}>
        Open dialog with state
      </button>
      <DWDialog
        open={dialogAccOpen}
        onClose={() => setDialogAccOpen(false)}
        ariaLabelledby="dialog-title"
        ariaDescribedby="dialog-description"
      >
        <h2 id="dialog-title">Dialog Title</h2>
        <p id="dialog-description">
          This is a description of the dialog content.
        </p>
        Dialog content
      </DWDialog>
    </div>
  );
};

export default App;

DWCollapse

The DWCollapse component is used to create collapsible sections in your application. It consists of a header that can be clicked to toggle the visibility of the body content.

import React from "react";
import { DWCollapse } from "dawuti-react-utils/collapse";

const App = () => {
  return (
    <section>
      <h3>DW Collapse</h3>

      <DWCollapse includeDefaultIcon={true}>
        <DWCollapse.Header>Toggle</DWCollapse.Header>
        <DWCollapse.Body>
          <p>This is the content of the collapse</p>
        </DWCollapse.Body>
      </DWCollapse>
    </section>
  );
};

export default App;

DWTabs

The DWTabs display can be modified so the tabs appear as a vertical list (mode='top-list'), horizontal list (mode='top') or aside vertical list (mode='aside')

import React, { useRef, useState } from "react";
import { DWTabs, DWTabsHandle } from "../lib/components/tabs/DWTabs";

export const DemoTabs = ({}) => {
  const tabsRef = useRef < DWTabsHandle > null;

  return (
    <section>
      <h3>DW Tabs</h3>
      <h4> Tabs in top mode</h4>
      <DWTabs
        imperativeRef={tabsRef}
        tabs={[
          { name: "Tab 1", content: "Some content for tab 1" },
          { name: "Tab 2", content: "Some content for tab 2" },
          { name: "Tab 3", content: "Some content for tab 3" },
        ]}
        renderTab={(tab, isActive, onClick, index) => (
          <button
            key={index}
            data-index={index}
            aria-pressed={isActive ? "true" : "false"}
            onClick={() => onClick(index)}
          >
            <span>{tab.name}</span>
          </button>
        )}
        renderContent={(tab, index, isActive) => <div>{tab.content}</div>}
      ></DWTabs>
    </section>
  );
};

DWToast

The DWToast display can be modified so the toast appears from top or bottom via position prop

import { useRef } from "react";
import { DWToast, DWToastHandle } from "../lib/components/toast/DWToast";

export const DemoToast = ({}) => {
  const toastTopRef = useRef < DWToastHandle > null;
  const toastBottomRef = useRef < DWToastHandle > null;

  return (
    <section>
      <h3>DW Toast</h3>

      <button onClick={() => toastBottomRef.current?.present()}>
        Present error bottom toast
      </button>
      <DWToast
        imperativeRef={toastBottomRef}
        mode="error"
        position="bottom"
        renderContent={() => "error bottom toast"}
      ></DWToast>
      <button onClick={() => toastTopRef.current?.present()}>
        Present success top toast
      </button>
      <DWToast
        imperativeRef={toastTopRef}
        mode="success"
        position="top"
        renderContent={() => "success top toast"}
      ></DWToast>
    </section>
  );
};