modal

The modal will help you provide the user with confirmation of their action. This loads lazily

DEMO

Resp. : ''

Default Props:

• description= required;
• title= required;
• type= 'info';
• animation= 'fadeInOut';

Props:

• description: string;
• type: MessageType;
• title: string;
• animation?: Animation;
• handleModalAnswer?: (answer: 'yes' | 'no' | 'ok' | 'cancel') => void;

MessageType:

There are 4 background colors to display based on your needs: success (green), error (red), warning (yellow), and info (blue). Each one has different type of responses that you can see in detail below.

• MessageType:
• | 'success' | 'error' | 'warning' | 'info';

Animation:

This property allows you to define a type of animation. By default, it is fade-in-out.

• Animation:
• | 'toUp' | 'toRight' | 'toDown' | 'toLeft';
• | 'jumpToLeft' | 'jumpToRight' | 'jumpToDown' | 'jumpToUp';
• | 'fadeInOut';

answer

There are two ways to get the user's answer, using a local or global state.

local state

The state variable 'modalAnswer'(useState) will return an answer when the user interacts with the modal. If it is of type info or success the modal will return 'ok', if it is of type error or warning it will give two options and return 'yes' or 'no'. If, on the other hand, it closes the modal without any answer, it will return 'cancel'

import { useState } from "react";
import { openModal, Button } from "dialui-components";

export const MyComponent = () => {
  const [ modalAnswer, setModalAnswer ] = useState("");

  const handleClick = () => {
    openModal({
      description: "Do you want to delete?",
      title: "Delete task",
      type: "warning",
      handleModalAnswer: setModalAnswer,
    });
  };
    return (
		<Button onClick={ handleClick } >	click </Button>
	)
};

global state

To get the answer globally you can wrap the application with the provider: UIProvider, then in your component with the useModal hook you will get the function handleModalAnswer that sets this answer and the global state variable. The function is sent as a prop to the openModal function. The global state variable 'modalAnswer' will give you the answers described in the previous paragraph in this component or in any other that wants to obtain said answer

 //main.tsx					
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { UIProvider } from 'dialui-components/dist/provider';
 
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <UIProvider>
      <App/>
    </UIProvider>
  </React.StrictMode>,
);

import { useModal } from "dialui-components/dist/hooks";
import { openModal, Button } from "dialui-components";

export const MyComponent = () => {
  const { modalAnswer, handleModalAnswer } = useModal();

  const handleClick = () => {
    openModal({
      description: "Do you want to delete?",
      title: "Delete task",
      type: "warning",
      handleModalAnswer: handleModalAnswer ,
    });
  };

  return (
		<Button onClick={ handleClick } >	click </Button>
	)
};