Dash Mantine Components 0.14.1

Added a link to this in the documentation as well! Great work.

1 Like

nice work, @RenaudLN . Thank you for this.
For people wondering how to use this component, would they have to download dmc-transferlist-aio or could they just git clone the repo?

At this stage I don’t intend to turn this into a package. I would advise people who want to use it to copy the transferlist_aio.py file into their project to use it. This would also allow to do add new things to it (e.g. contents of the left list could be populated from a database when searching).

1 Like

Hello, DMC is a great package and I’d love to upgrade to 0.14.x
After some setbacks a few weeks ago I just tried again, and I’m now on dash_mantine_components==0.14.3

I ported my AppShell login to dmc.AppShellHeader & dmc.AppShellMain and wrapped app.layout in a dmc.MantineProvider. But when the app runs I get this error:

r.useId is not a function

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
TypeError: r.useId is not a function

    at t.useRandomClassName (http://localhost:8050/_dash-component-suites/dash_mantine_components/dash_mantine_components.v0_14_3m1715250691.js:2:1544322)

    at http://localhost:8050/_dash-component-suites/dash_mantine_components/dash_mantine_components.v0_14_3m1715250691.js:2:1536246

    at renderWithHooks (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:14938:20)

    at updateForwardRef (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:16951:22)

    at beginWork (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:18780:18)

    at HTMLUnknownElement.callCallback (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:182:16)

    at Object.invokeGuardedCallbackDev (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:231:18)

    at invokeGuardedCallback (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:286:33)

    at beginWork$1 (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:23338:9)

    at performUnitOfWork (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:22289:14)

I’ve tried every subrelease of 0.14 so far and always get this. The app works fine with 0.12.x

Thanks for any suggestions

Make sure you set the react version to 18, check out DMC’s docs, it describes this step.

Here is a complete minimal example which can be used as an app frame to get started with dmc 0.14

It shows how to:

  • Set the React 18 version (currently required with Dash<=2.17, but will not be necessary with future Dash version.

  • Load the stylesheets required for certain components (dates, code highlighting, charts, carousel, notification and progress)

  • Uses Appshell with a header, hooter, navbar aside and main content. The navbar and aside are responsive and are hidden on small screens.

  • Wrap the app.layout in the MantineProvider

import dash_mantine_components as dmc

from dash import Dash, _dash_renderer, dcc, callback, Input, Output, State

_dash_renderer._set_react_version("18.2.0")


header = dmc.Group(
    [
        dmc.Burger(id="burger-button", opened=False, hiddenFrom="md"),
        dmc.Text(["Header"], size="xl", fw=700),
    ],
    justify="flex-start",
)

navbar = dcc.Loading(
    dmc.ScrollArea(
        [
            dmc.Text("Your Sidebar content", fw=700),
        ],
        offsetScrollbars=True,
        type="scroll",
        style={"height": "100%"},
    ),
)

page_content = dmc.Text("Your page content")

stylesheets = [
    "https://unpkg.com/@mantine/dates@7/styles.css",
    "https://unpkg.com/@mantine/code-highlight@7/styles.css",
    "https://unpkg.com/@mantine/charts@7/styles.css",
    "https://unpkg.com/@mantine/carousel@7/styles.css",
    "https://unpkg.com/@mantine/notifications@7/styles.css",
    "https://unpkg.com/@mantine/nprogress@7/styles.css",
]

app = Dash(external_stylesheets=stylesheets)


app_shell = dmc.AppShell(
    [
        dmc.AppShellHeader(header, px=25),
        dmc.AppShellNavbar(navbar, p=24),
        dmc.AppShellAside("Aside", withBorder=False),
        dmc.AppShellMain(page_content),
    ],
    header={"height": 70},
    padding="xl",
    navbar={
        "width": 375,
        "breakpoint": "md",
        "collapsed": {"mobile": True},
    },
    aside={
        "width": 300,
        "breakpoint": "xl",
        "collapsed": {"desktop": False, "mobile": True},
    },
    id="app-shell",
)

app.layout = dmc.MantineProvider([app_shell])


@callback(
    Output("app-shell", "navbar"),
    Input("burger-button", "opened"),
    State("app-shell", "navbar"),
)
def navbar_is_open(opened, navbar):
    navbar["collapsed"] = {"mobile": not opened}
    return navbar


if __name__ == "__main__":
    app.run_server(debug=True)


1 Like

Here’s a minimal example of a responsive app with a theme switch component - similar to the dmc docs

import dash_mantine_components as dmc
from dash_iconify import DashIconify
from dash import Dash, _dash_renderer, dcc, callback, Input, Output, State, clientside_callback

_dash_renderer._set_react_version("18.2.0")

theme_toggle = dmc.ActionIcon(
    [
        DashIconify(
            icon="radix-icons:sun",
            width=25,
            id="light-theme-icon",
        ),
        DashIconify(
            icon="radix-icons:moon",
            width=25,
            id="dark-theme-icon",
        ),
    ],
    variant="transparent",
    color="yellow",
    id="color-scheme-toggle",
    size="lg",
    ms="auto"
)


header = dmc.Group(
    [
        dmc.Burger(id="burger-button", opened=False, hiddenFrom="md"),
        dmc.Text(["Header"], size="xl", fw=700),
        theme_toggle
    ],
    justify="flex-start",
)

navbar = dcc.Loading(
    dmc.ScrollArea(
        [
            dmc.Text("Your Sidebar content", fw=700),
        ],
        offsetScrollbars=True,
        type="scroll",
        style={"height": "100%"},
    ),
)

page_content = [dmc.Text("Your page content"), dmc.Loader(color="red", size="md", variant="oval")]

stylesheets = [
    "https://unpkg.com/@mantine/dates@7/styles.css",
    "https://unpkg.com/@mantine/code-highlight@7/styles.css",
    "https://unpkg.com/@mantine/charts@7/styles.css",
    "https://unpkg.com/@mantine/carousel@7/styles.css",
    "https://unpkg.com/@mantine/notifications@7/styles.css",
    "https://unpkg.com/@mantine/nprogress@7/styles.css",
]

app = Dash(external_stylesheets=stylesheets)


app_shell = dmc.AppShell(
    [
        dmc.AppShellHeader(header, px=25),
        dmc.AppShellNavbar(navbar, p=24),
        dmc.AppShellAside("Aside", withBorder=False),
        dmc.AppShellMain(page_content),
        dmc.AppShellFooter("Footer")
    ],
    header={"height": 70},
    padding="xl",
    navbar={
        "width": 375,
        "breakpoint": "md",
        "collapsed": {"mobile": True},
    },
    aside={
        "width": 300,
        "breakpoint": "xl",
        "collapsed": {"desktop": False, "mobile": True},
    },
    id="app-shell",
)

app.layout = dmc.MantineProvider(
    [
        dcc.Store(id="theme-store", storage_type="local", data="light"),
        app_shell
    ],
    id="mantine-provider",
    forceColorScheme="light",
)


@callback(
    Output("app-shell", "navbar"),
    Input("burger-button", "opened"),
    State("app-shell", "navbar"),
)
def navbar_is_open(opened, navbar):
    navbar["collapsed"] = {"mobile": not opened}
    return navbar



clientside_callback(
    """
    function(data) {
        return data
    }
    """,
    Output("mantine-provider", "forceColorScheme"),
    Input("theme-store", "data"),
)


clientside_callback(
    """
    function(n_clicks, data) {
        return data === "dark" ? "light" : "dark";
    }
    """,
    Output("theme-store", "data"),
    Input("color-scheme-toggle", "n_clicks"),
    State("theme-store", "data"),
    prevent_initial_call=True,
)



if __name__ == "__main__":
    app.run_server(debug=True)

"""
Add the following to a .css file in the assets folder.  
This toggles the theme icons
----------------------

:root[data-mantine-color-scheme="dark"] #dark-theme-icon {
    display: none;
}

:root[data-mantine-color-scheme="light"] #light-theme-icon {
    display: none;
}


"""

dmc-14-theme-switch

Thank you very much for this example. I can now see where the bits mentioned in the migration guide go (react version, stylesheets etc).

I am using your app.py (the second version with the theme switcher) as a starting point to migrate my existing multi-page app. I replaced your page_content with dash’s page_container:

from dash import ..., ..., page_container

...
dmc.AppShellMain(page_container),
...

And I’m going from there. Thanks

1 Like