Dash Breakpoints component

Dash Python
1

Hi all, I just published a new dash_breakpoints component on pypi.

It allows to create DOM breakpoints (width and height) that trigger callbacks when they are crossed. The main use case is to change the content of the app based on screen sizes, when css only does not cut it. My use case was the following: I have a layout with a topbar and a sidebar, but I want that on a small screen, all the content of the topbar and sidebar is rendered in a drawer instead, while keeping the same component ids to be able to trigger the same callbacks.

The component also currently listens to window width and height so you can use those in callbacks too but I would advise to not use the width/height attributes as callback Inputs to avoid many triggers (using them in State is safe)

from dash_breakpoints import WindowBreakpoints
from dash import Dash, html, callback, Input, Output, State

app = Dash(__name__)

app.layout = html.Div(
    [
        html.Div(id="display"),
        WindowBreakpoints(
            id="breakpoints",
            # Define the breakpoint thresholds
            widthBreakpointThresholdsPx=[800, 1200],
            # And their name, note that there is one more name than breakpoint thresholds
            widthBreakpointNames=["sm", "md", "lg"],
        ),
    ]
)

@callback(
    Output("display", "children"),
    Input("breakpoints", "widthBreakpoint"),
    State("breakpoints", "width"),
)
def show_current_breakpoint(breakpoint_name: str, window_width: int):
    return f"Breakpoint name: {breakpoint_name}, width: {window_width}px"


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

dash_breakpoints

14 Likes