Forem: PrinceRajRoy

Dialog Element: A New Approach To Modals And Popups

PrinceRajRoy — Sun, 03 Apr 2022 17:51:12 +0000

Hey there, folks!

So recently, dialog HTML element became stable in all modern browser engines and can be safely used in your projects right now.

What's so interesting about this element you ask?

It can be easily used to create modals/popups for your web apps in just a few minutes, this element exposes some methods that can be used to control it's behavior and is fully customizable.

This can be used as a great alternative to portals in React.

We'll first look at a vanilla JS use-case and then one in React using a custom component.

Let's dive in....

HTML Element

The element can be added using the dialog tag as follows

 <dialog open>
   <p>Dialog Content</p>
 </dialog>

The open attribute indicates the dialog is shown by default. We can add all kinds of UI inside it, like forms for any use case - more on that below.

Methods

There are 3 methods available for this element.

close() - closes the dialog
show() - displays the dialog (background UI elements, like buttons, inputs, etc are still interactable, can be used for popups)
showModal() - displays the dialog over any other UI element (even other open dialogs) visible on screen with some background overlay (think of it like having highest z-index, none of the background UI is interactable until it's closed, can be used for modals)

Here's the difference between the later two functions.

Note, this example contains default browser dialog without any stylings

Events

This element emits two events based on the current condition.

close - This is triggered when user tells the browser to close the dialog, as an example using the available in-built feature of closing it through the Esc key.
cancel - This is triggered when the dialog has been closed. Since it is applicable in the previous case too, it is also triggered after close.

Both of these events are also available via their function alternatives onclose and oncancel respectively.

Open up the console, try closing the dialog using X and then using Esc key.

The returnValue

This property on the dialog element can be used to detect the button value which was used to close the dialog. Although this works when

there is a <form /> inside dialog which has attribute method set to "dialog". Then submitting form automatically closes the dialog. In this case, returnValue is set to submit button's value.

  <form method="dialog" />

if manually closed, passing a string as an argument to the dialog close function call in the button click event callback as

  dialog.close('This string will be assigned to returnValue');

A full form-dialog using everything we have gone through so far.

Note, that we are only updating the details if the form was submitted, not if user closed the dialog manually. This is detected based on the returnValue property value of the dialog.

Overlay Customization

The background overlay of the dialog can be customized using the ::backdrop pseudo-element, we need to set the background property for it and it will be reflected on the overlay.

React Dialog Component

Here's a react component version of the dialog element which can be further customized with styles passed as className prop and content as children as per requirement.

That's it, for this one folks!
If you have any questions or suggestions, feel free to reach out to me!

Connect with me on Twitter, Github

Compound Components and Layout Components in React

PrinceRajRoy — Fri, 04 Mar 2022 16:28:22 +0000

Hello!

Writing resilient components with flexible composition is a bit tricky in React. In this post we will see the difference, how and when to use layout and compound components. Let's get started.

Layout Components

These component are used for creating reusable layouts in a react app. They accept UI trees as props and then position them as required visually. The props are basically used to fill up holes in the layout component UI, it's upto this component to position them in correct places.

One important thing to note is that Layout Components don't usually need their own state but there could be use cases depending on the situation (mostly state related to UI rather than external data).

When we start building a website from scratch it's always a good idea to visualize the UI in respect of the different parts that can be abstracted into it's own component. As an example below is the homepage of this website.

As we can see, the website can be divided into 3 main parts, the Left Sidebar, Main View and the Right Sidebar. So normally using composition we will write it as,

function App() {
  return (
    <div>
      <Home
        leftSidebar={
          <LeftSidebar>
            <Community />
            <Other />
          </LeftSidebar>
        }
        mainView={
          <MainView>
            <Header />
            <Feed />
          </MainView>
        }
        rightSidebar={
          <RightSidebar>
            <Listings />
            <News />
          </RightSidebar>
        }
      />
    </div>
  )
}

function LeftSidebar({ children }) {
  return <div>{children}</div>
}

function MainView({ children }) {
  return <div>{children}</div>
}

function RightSidebar({ children }) {
  return <div>{children}</div>
}

function Home({ leftSidebar, mainView, rightSidebar }) {
  return (
    <div>
      {leftSidebar}
      {mainView}
      {rightSidebar}
    </div>
  )
}

We can apply different styling to each of these abstracted components and position them as and when required in Home Component, each prop here fills a hole in the UI.

Compound Components

These components also use composition model, the simplest overview of these types components can be found in the <select>/<option> tag in html. These tags have a implicit state that enables it to show the currently selected option while still giving the developer full access to the rendering logic for each of the pieces.
For example if we want to disable one of the options in the UI we can easily do it

  <select value={value}>
    {options.map(option => (
       <option value={option} disabled={option === disableValue} />
    )}
  </select>

We can create components based on this concept, such existing UI Libraries or from scratch, we will be using Menu Component and it's option equivalent MenuItem provided by MUI.

Here, in ListMenu Component, we are managing the state as well as using MUI components in a coherent way.

   <Menu
      anchorEl={anchorEl}
      open={open}
      onClose={handleClose}
    >
     {options.map((option, index) => (
       <MenuItem
         key={option}
         disabled={index === 0}
         selected={index === selectedIndex}
         onClick={(event) => handleMenuItemClick(event, index)}
       >
         {option}
       </MenuItem>
     ))}
   </Menu>

We can change the styles based on the requirements, disable some options (first option is disabled) and much more, add images along with text? sure, we can customize as much as we want.

Other developers can use this abstraction without worrying about handling state, they can customize styles by passing className to the component as a prop. And that's Compound Components!

I loved writing this post. If you have any questions or suggestions, feel free to reach out to me!

Connect with me on Twitter, Github