CustomizationProvider and custom BreakPoints

[holylander]

hi there!

Looking for some help here regarding twilio paste. I want to extend the default breakpoints in order to address wider screen sizes.

The main reason for this is because the app I am working in doesn't have any restriction in terms of app max-width, therefore, the app can take the full width of your screen, for instance, 2500px

I was playing with the CustomizationProvider and willing to make below code to work, without success:

    <CustomizationProvider
      baseTheme="default"
      customBreakpoints={[
        // twilio paste default breakpoints
        "25rem", "64rem", "77rem", 
        // new breakpoints
        "1600px",
        "2000px",
        "3000px"
      ]}
    >
      <ReactApp />
    </CustomizationProvider>

Any body that could enlighten me how to implement this would be much appreciated, thanks

[nkrantz]

Hi @holylander - nothing is jumping out from the code snippet. Could you provide a reproduction in a CodeSandbox so that we can help you debug? Feel free to use this Paste Starter Template. Thanks

[SiTaggart]

Might be helpful to illustrate with a codesandbox, as you don't even need to use the customization provider, and nor should you if you are working on internal Twilio products.

https://codesandbox.io/s/custom-breakpoints-qm51ft

You can have as many breakpoints as you desire, but they should be set for the entire application.

[holylander]

Thanks a lot for the answers and the help! I appreciate it very much.

this ticket can be solved ;)