Deno•3y ago

Displaying a Modal

I am trying to get a minimal example of using Bootstrap Modals, and managing that modal using state.

Here is

routes/Index.tsx

routes/Index.tsx

import { Head } from "$fresh/runtime.ts";

import Modal from "../islands/Modal.tsx";

export default function Home() {
  return (
    <>
      <Head>
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
          crossorigin="anonymous"
        />
      </Head>
      <Modal visible={true}/>
      <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"
      >
      </script>
    </>
  );
}

import { Head } from "$fresh/runtime.ts";

import Modal from "../islands/Modal.tsx";

export default function Home() {
  return (
    <>
      <Head>
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
          crossorigin="anonymous"
        />
      </Head>
      <Modal visible={true}/>
      <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"
      >
      </script>
    </>
  );
}

And here is

islands/Modal.tsx

islands/Modal.tsx

: https://paste.jlcarveth.dev/api/02dcac97-dc65-4802-ad77-81e8ac0a8de9

The modal can open and close fine. The issue is that the state of the Modal can't be controlled programatically. When I have used Bootstrap modals in the past (with React), it was as simple as adding / removing the

show

show

class from the modal. That approach no longer seems to work.

So I try to hide / show the modal via the bootstrap API, which you can see me try in the

onClick

onClick

of that close button. But the island can't seem to access the bootstrap API. I have tried importing bootstrap via

npm:bootstrap

npm:bootstrap

, as well as via

https://esm.sh/bootstrap

https://esm.sh/bootstrap

In short; I want to be able to toggle the Modal on and off (visible / hidden) without having to rely on the

data-bs-toggle

data-bs-toggle

and

data-bs-target

data-bs-target

HTML attributes since that prevents me from managing the modal state.

Deno AI Helper•12/11/23, 7:17 PM

I wasn't able to find the answer to your question in the official Deno documentation. However, based on the code snippet you provided, I can offer some general advice, but please note that this advice is not based on the Deno documentation, and you should double-check the accuracy of the advice given.

In your

routes/Index.tsx

routes/Index.tsx

, you are correctly importing the Bootstrap CSS and JS files. However, I noticed that you are using the attribute in your and tags. The correct attribute name is (with a capital 'O') in JSX. This might not be the cause of your issue with the modal state, but it's worth correcting.

Regarding the Bootstrap modal API, if you are trying to access it from a Deno Fresh project, you should ensure that Bootstrap's JavaScript is fully loaded and available in the window context where your island component is trying to access it. If you are importing Bootstrap via

npm:bootstrap

npm:bootstrap

https://esm.sh/bootstrap

https://esm.sh/bootstrap

, make sure that the import is done correctly and that the Bootstrap JavaScript bundle is initialized before you try to use it in your component.

Since you are trying to manage the state programmatically, you might need to use the Bootstrap Modal methods like and or manipulate the classes directly as you mentioned. If the Bootstrap API is not accessible, it could be due to the way the scripts are loaded or executed in the context of your Deno Fresh application.

If you continue to face issues, I recommend checking the following:

Ensure that the Bootstrap JavaScript is loaded and executed before your island component tries to use it.
Verify that the Bootstrap JavaScript is not being blocked or unloaded when your island component is rendered.
Check for any JavaScript errors in the

Deno AI Helper•12/11/23, 7:17 PM

browser's console that might indicate problems with loading or using Bootstrap.

Remember to consult the Bootstrap documentation for the correct usage of the modal API and consider reaching out to the community for more specific guidance on integrating Bootstrap with Deno Fresh.

Helpful Links:
Fresh 1.0
Fresh 1.2 – welcoming a full-time maintainer, sharing state between islands, limited npm support, and more
Interactive islands | Fresh docs
Fresh 1.1 - automatic JSX, plugins, DevTools, and more

Captain 𝗕𝗘𝗘𝗙🥩OP•12/11/23, 7:26 PM

Good bot, I will try