🧩 Plasmo Developers•2y ago

help w/ mantine notifications

i've got mantine modals working in content.tsx but notifications don't seem to work, probably not mounting them correctly. can anyone provide some help (or code) on how to use mantine notifications in content.tsx [https://mantine.dev/others/notifications/] here's the modal:

import { useState } from 'react';
import { Modal } from '@mantine/core';

export default function MyComponent() {
  const [open, setOpen] = useState(false);

  const handleButtonClick = () => {
    setOpen(true);
  }

  const handleClose = () => {
    setOpen(false);
  }

  return (
    <>
      <button onClick={handleButtonClick}>Open Modal</button>
      <Modal
        title="My Modal"
        opened={open}
        onClose={handleClose}
      >
        This is the content of my modal.
      </Modal>
    </>
  );
}

import { useState } from 'react';
import { Modal } from '@mantine/core';

export default function MyComponent() {
  const [open, setOpen] = useState(false);

  const handleButtonClick = () => {
    setOpen(true);
  }

  const handleClose = () => {
    setOpen(false);
  }

  return (
    <>
      <button onClick={handleButtonClick}>Open Modal</button>
      <Modal
        title="My Modal"
        opened={open}
        onClose={handleClose}
      >
        This is the content of my modal.
      </Modal>
    </>
  );
}

25 Replies

Arcane•2y ago

@cooper has reached level 2. GG!

sumitOP•2y ago

@louis can you please reply with some ideas

lab•2y ago

@cooper what's the code you're using for notification?

lab•2y ago

https://mantine.dev/others/notifications/

Notifications system

Mantine notifications system

sumitOP•2y ago

i tried different permutations and combinations, from a simple one liner onclick notification.show to complex stuff nothing worked im probably missing something basic

lab•2y ago

You're probably not nesting your notification.show within the provider Basically, try making a component with the notification.show, then insert it as child inside MantineProvider

sumitOP•2y ago

target _something right?

lab•2y ago

Do not use the notification.show inside the same component as the provider

sumitOP•2y ago

_plasmo i think

lab•2y ago

yeah _plasmo or you can prob use the doc root as well

sumitOP•2y ago

i tried that but i am unable to figure it out can you please send an example? feel free to base it base it off the modals code

lab•2y ago

Send me the code you have right now that's attemping to call notifcation.show

sumitOP•2y ago

i deleted it all and reverted back to modals i thought that I'll start from scratch sometime later

lab•2y ago

Is the above your CSUI?

sumitOP•2y ago

one of the simplest things that i tried: return ( <> <button onClick={() => notifications.show({ message: 'Hello' })}>Open notif</button>
</> ); i was like if this didn't work there's something basic that I'm missing this was my content.tsx after imports and defining the function @louis no i am not using mantine provider 😦 is it necessary

lab•2y ago

I think so - their notification.show function is probably using the provider context to trigger the notification

sumitOP•2y ago

i also didn't add <Notifications /> component anywhere can this be the basic mistake do i just call it in content.tsx like just in the first line of return could this return work? <MantineProvider withNormalizeCSS withGlobalStyles> <Notifications />
<button onClick={() => notifications.show({ message: 'Hello' })}>Open notif</button>
</MantineProvider>

Arcane•2y ago

@cooper has reached level 3. GG!

lab•2y ago

Prob not, try it and see if it works, but I doubt you need to move the button into another component

sumitOP•2y ago

what could be better oh so a new file -> new components then mount on content tsx? @louis

lab•2y ago

You can declare a separate comp in the same file too:

sumitOP•2y ago

yeah i agree comps look better in different files though haha, just semantics i guess

lab•2y ago

function App(){
return (
      <Button
        variant="outline"
        onClick={() =>
          notifications.show({
            title: 'Default notification',
            message: 'Hey there, your code is awesome! 🤥',
          })
        }
      >
        Show notification
      </Button>

)
}

export default function MyComponent() {
  return (
     <MantineProvider withNormalizeCSS withGlobalStyles>
      <Notifications />
      <App />
    </MantineProvider>
    </>
  );
}

function App(){
return (
      <Button
        variant="outline"
        onClick={() =>
          notifications.show({
            title: 'Default notification',
            message: 'Hey there, your code is awesome! 🤥',
          })
        }
      >
        Show notification
      </Button>

)
}

export default function MyComponent() {
  return (
     <MantineProvider withNormalizeCSS withGlobalStyles>
      <Notifications />
      <App />
    </MantineProvider>
    </>
  );
}

The idea is to test it out Note that I don't use mantine - the example was contributed by the community

sumitOP•2y ago

wow thanks! I'll test this out.

Ymir•7mo ago

Want to bump this up, as I have a similar issue - and curious if someone has found a fix. I have a wrapper around my content script that looks like this:

import { createTheme, MantineProvider, Notification } from "@mantine/core"
import React, { useEffect } from "react"
//see https://github.com/PlasmoHQ/plasmo/issues/776#issuecomment-1811072653
// style imports
import "@mantine/core/styles.css"
import "@mantine/notifications/styles.css"
import "~0lib/styles/mantine-override.css"
// @ts-ignore
import mantineCssText from "data-text:@mantine/core/styles.css"
// @ts-ignore
import mantineNotificationsCssText from "data-text:@mantine/notifications/styles.css"
// @ts-ignore
import mantineOverrideCssText from "data-text:~/0lib/styles/mantine-override.css"
import type { PlasmoGetStyle } from "plasmo"

const theme = createTheme({})

export const getStyle: PlasmoGetStyle = () => {
  const style = document.createElement("style")
  style.id = "styles-global"
  style.textContent =
    mantineCssText + mantineNotificationsCssText + mantineOverrideCssText
  return style
}

export function EntrypointWrapper({ children }: { children: React.ReactNode }) {
  return (
    <MantineProvider theme={theme} cssVariablesSelector=":host">
      {children}
      <Notification />
    </MantineProvider>
  )
}

import { createTheme, MantineProvider, Notification } from "@mantine/core"
import React, { useEffect } from "react"
//see https://github.com/PlasmoHQ/plasmo/issues/776#issuecomment-1811072653
// style imports
import "@mantine/core/styles.css"
import "@mantine/notifications/styles.css"
import "~0lib/styles/mantine-override.css"
// @ts-ignore
import mantineCssText from "data-text:@mantine/core/styles.css"
// @ts-ignore
import mantineNotificationsCssText from "data-text:@mantine/notifications/styles.css"
// @ts-ignore
import mantineOverrideCssText from "data-text:~/0lib/styles/mantine-override.css"
import type { PlasmoGetStyle } from "plasmo"

const theme = createTheme({})

export const getStyle: PlasmoGetStyle = () => {
  const style = document.createElement("style")
  style.id = "styles-global"
  style.textContent =
    mantineCssText + mantineNotificationsCssText + mantineOverrideCssText
  return style
}

export function EntrypointWrapper({ children }: { children: React.ReactNode }) {
  return (
    <MantineProvider theme={theme} cssVariablesSelector=":host">
      {children}
      <Notification />
    </MantineProvider>
  )
}

In my content script I have the equivalent of:

<Button onClick={() => notifications.show({message: 'TEST'}) }>TEST</Button>

<Button onClick={() => notifications.show({message: 'TEST'}) }>TEST</Button>

The mantine styles have been working flawlessly with the method described in the example / on github. But for the notifications, not so much. I can see what I assume to be the <Notification /> component in the top left corner of my screen, but triggering notifications does nothing. The notifications/styles.css file looks like this:

.m_b37d9ac7 {
  width: calc(100% - var(--mantine-spacing-md) * 2);
  position: fixed;
  z-index: var(--notifications-z-index);
  top: var(--notifications-top);
  left: var(--notifications-left);
  right: var(--notifications-right);
  bottom: var(--notifications-bottom);
  transform: var(--notifications-transform);
  max-width: var(--notifications-container-width);
}

.m_5ed0edd0 + .m_5ed0edd0 {
    margin-top: var(--mantine-spacing-md);
  }

.m_b37d9ac7 {
  width: calc(100% - var(--mantine-spacing-md) * 2);
  position: fixed;
  z-index: var(--notifications-z-index);
  top: var(--notifications-top);
  left: var(--notifications-left);
  right: var(--notifications-right);
  bottom: var(--notifications-bottom);
  transform: var(--notifications-transform);
  max-width: var(--notifications-container-width);
}

.m_5ed0edd0 + .m_5ed0edd0 {
    margin-top: var(--mantine-spacing-md);
  }

So wouldn't guess there was a need for a overwrite or anything. I can make a reproducible minimal repo if someone wants to make a go at getting it working!

Gaming

Programming

help w/ mantine notifications