Minimize, Maximize dialog/modal

Introduction to the Minimize, Maximize, and Restore dialogs/modals:

In order to enhance the user interaction and make the application responsive and user-friendly, we, as developers, often resort to modal dialogs or panels. The Minimize dialog is a type of message box or dialog that will appear to the user offering options to minimize, restore, and close the user interface of the application in a simplified manner. Through this tutorial, we're going to learn how to create a Minimize Dialog in React.

Project Setup:

Before going through this tutorial, install the following packages:

Create a new React project Install React Bootstrap by npm install react-bootstrap Set up a basic React class-component

Here is a setup for React class-component by using create-react-app command:

npx create-react-app my-app-name
cd my-app-name

Coding the Minimize Dialog with React

Here is how you can create a Dialog component that includes minimize function:

First, create the Dialog.js file and enter the following code:

Dialog.js

import React, { useState } from 'react';
import { Modal } from 'react-bootstrap';
import './Dialog.css';
import './Dialog.css.css';

const Dialog = props => {
  const { title, message, onSubmit } = props;
  const [show, setShow] = useState(true);
  const [minimized, setMinimized] = useState(false);

  function handleMinimize() {
    setMinimized((prevMinimized) =>!prevMinimized)
  }

  function renderDialogContent() {
    if (minimized === true) {
      return (
        <div onClick={handleMinimize}
          style={{
            transition: 'all 200ms',
            transformOrigin: 'top',
          }}
          className=" minimized-dialog"
        >
          <p>{title}<br></br>{message}</p>
        </div>
      );
    } else {
      return (
        <Modal onShow={handleMinimize} style={{
          alignItems: 'center',
        }}>
          <Modal.Dialog>
            <Modal.Heading>{title}</Modal.Heading>
            <Modal.Body>
              {message}
            </Modal.Body>
            <div style={{
              display: 'flex',
              justify-content: 'space-evenly',
            }}>
              <button onClick={()=>{
                setShow(false);
                onSubmit()
              }} id="btn-ok"variant="primary">OK
              </button>
          </div>
        </Modal.Dialog>
      );
    }
  }

  return (
    <Fragment>
      {renderDialogContent()}
      {show!== false && (
        <div style={{
          z-index: 1003,
        }} className={show? 'show-box' : 'hide'}>
          {renderDialogContent()}
        </div>
      )}
    </Fragment>)
};

export default Dialog

Explanation:

This code is self-explanatory. It contains a DialogBox that takes in props – title, message, submit function and state for initialization. There is a logic for whether the dialog show or not. If someone starts the app, the dialog starts in minimized but if we click on anything in dialog, it become normal then if we choose OK the dialog hides

To use this minimize dialog:

You first need to import the Component in the main file component and pass the necessary args. Below is an updated version of the main Application.js component:

Dialog.js

import React from 'react';
import Dialog from "./Dialog";
import './Index.css';
import './common.css';
import './Responsive.css';
import './login.css';

function App(){
  return (
    // Your Code Here
        );
}

export default App

How we can handle the Minimized Dialog using React Hooks for State:

    const [ minimized, setMinimized]=useReducer(minimizeReducer,intialMinimizedState,
    )

    const myReducer = (stateReducer,action)=>{
        let newState=stateReducer  
        if(action.type.includes('show')){
            const {initialState}=setStateReducer(stateReducer,INITIALSTATE)
            currentState=INITIALSTATE // set default state
              return{...new StateReducer} // return NEW state reducer
        }}else{
            return...
        } 
    )}   

Conclusion:

With this tutorial we have been able to utilize the power of React to design a dialog model that contains minimize function capabilities. By using React Boostrap Modal component, JSX, state management and proper styling we have created Dialog that makes it easy users to understand and interact it.