# Dash Breakpoints component

**URL:** <https://community.plotly.com/t/dash-breakpoints-component/68227>\
**Category:** Dash Python\
**Tags:** community-components\
**Created:** [September 23, 2022, 8:48am UTC](https://community.plotly.com/t/dash-breakpoints-component/68227 "2022-09-23T08:48:17Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![RenaudLN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/renaudln/32/9041_2.png) [@RenaudLN](https://community.plotly.com/u/RenaudLN)\
**Post date:** [September 23, 2022, 8:48am UTC](https://community.plotly.com/t/dash-breakpoints-component/68227/1 "2022-09-23T08:48:17Z")

</div>

Hi all, I just published a new [dash\_breakpoints](https://github.com/RenaudLN/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)

```python
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/5/457e7a31bb3ad9764b7eef4e7d44354ccb409b23.gif)

---

<div class="post-metadata">

**Author:** ![Pieczenik](https://avatars.discourse-cdn.com/v4/letter/p/d6d6ee/32.png) [@Pieczenik](https://community.plotly.com/u/Pieczenik)\
**Post date:** [March 10, 2026, 10:01pm UTC](https://community.plotly.com/t/dash-breakpoints-component/68227/2 "2026-03-10T22:01:38Z")

</div>

I have been using this component but am now getting some react warnings about defaultProps being removed. Is there any chance this will be updated to fix this error?

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/b/d/bd2c69ceff411c10370e0f41ad1909d0622540d8.png)