DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Reusable modal component in Astro
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Reusable modal component in Astro

Today we'll be making an reusable modal component in Astro.

The idea is to have one component that follows HTML semantics and can trigger a modal popup.

The content of this popup can be anything we want, and we want to use this component dynamically.

The end result will look like this:

reusable modal component in Astro

Creating the component

Make sure you have an Astro project setup before. If you don't have one yet, please check out my Astro starter project.

We want to add a new component called Modal.astro inside our components folder.

The component should receive two properties: the ID of this modal and a text for the open button.

---
const {id, open} = Astro.props;
---
Enter fullscreen mode Exit fullscreen mode

These three dots are known as frontmatter and can be used to include javascript in your Astro components.

Then we want to render the button that can open a modal.

<button onclick="{`window.${id}.showModal()`}">{open}</button>
Enter fullscreen mode Exit fullscreen mode

What we do here is bind a click listener to this button. In there, we pass the unique ID for this modal.
Then we set the open variable in the button. This is the text on the button.

The window showModal function is a native browser function to invoke dialogs.
By using this way, we get a backdrop option, making it easier to style this modal.

The next thing we want is the actual dialog element.

<dialog id="{id}">
  <slot name="main" />
  <form method="dialog">
    <slot name="close" />
  </form>
</dialog>
Enter fullscreen mode Exit fullscreen mode

As you can see, we pass the ID as the unique ID for this dialog element. With this ID, we can open it as we saw in the button above.

Then we pass a slot for the main content. (More on the slots in a bit)
And we add a form with a close slot. This is needed because a native dialog will close when a button inside this dialog form is pressed. (The method="dialog" is key here).

The last thing we want to add under our frontmatter is some basic styling.

<style lang="scss">
  dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    &::backdrop {
      position: fixed;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      background: rgba(255, 0, 0, 0.1);
    }
  }
</style>
Enter fullscreen mode Exit fullscreen mode

This will add some basic styling to center our dialog on the page and color the backdrop.

Using the Astro modal component

Now we want to use this modal component. Let's see how that works.
Open up the pages/index.astro file and import the component in your frontmatter part.

--------
// Component Imports
import Modal from '../components/Modal.astro';
--------
Enter fullscreen mode Exit fullscreen mode

To use it, you can type HTML like this:

<Modal id="dialog" open="Open modal">
  <main slot="main">
    <p>Some extra content you would like here</p>
    <hr />
    <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo" />
  </main>
  <button slot="close">Close modal</button>
</Modal>
Enter fullscreen mode Exit fullscreen mode

Pretty cool!

Let's see what's happening in a bit more detail.
We open a Modal component. This takes two parameters being the ID and the open button text.

Then we insert a main element with the slot key. Remember the slots we talked about? This element will be rendered inside the main slot.

And then we add the button which reflects the close slot!

That's it!
We now have a reusable component that's easy to use!

You can find the complete code on GitHub.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!