Register custom breakpoints
What are custom breakpoints?
You can add custom breakpoints with custom sizes in Experiences. You can also make changes to an existing breakpoint updating its size, name or icon.
A breakpoint update doesn't automatically affect the existing experiences. To apply breakpoint changes to a specific experience, click Update breakpoints in the experience editor.
Requirements
Breakpoint object
A breakpoint object must contain the following properties:
| Property | Value type | Description |
|---|---|---|
id |
String | Must be a unique value. |
query |
String | Defines the range of viewport sizes that are targeted by this breakpoint using either < or >. The first breakpoint must have a wild card query. |
previewSize |
String | Defines the size of the canvas in the experience editor to test the view for this breakpoint. Make sure that this value is covered by the query. |
displayName |
String | Is displayed as a breakpoint label in the experience editor. |
displayIcon |
String | Possible values: desktop, tablet, mobile. We plan to support more breakpoint display icons in the future. |
First breakpoint example
The first breakpoint is the primary breakpoint for all sizes and must have a wild card query, for example:
[{
...,
id: 'desktop',
query: '*',
displayName: 'All Sizes',
previewSize: '100%',
displayIcon: 'desktop'
},
{
id: 'tablet',
query: '<992px',
displayName: 'Tablet',
previewSize: '820px',
displayIcon: 'tablet'
}]Breakpoints ordering
For now, we only support a desktop-first approach, hence breakpoints must be ordered from the largest to the smallest pixel value, for example:
[
...,
{
...,
query: '<992px',
previewSize: '820px',
},
{
...
query: '<576px',
previewSize: '390px',
},
]Example custom breakpoints registration
The following code is an example of how to register custom breakpoints:
import { defineBreakpoints } from '@contentful/experiences-sdk-react';
defineBreakpoints([
{
id: 'desktop',
query: '*',
displayName: 'All Sizes',
previewSize: '100%',
},
{
id: 'tablet',
query: '<992px',
displayName: 'Tablet',
previewSize: '820px',
},
{
id: 'mobile',
query: '<576px',
displayName: 'Mobile',
previewSize: '390px',
},
])