rw.getBreakpoints

Access theme breakpoint configuration for responsive design. This data is also available via rw.theme.breakpoints.

Accessing Breakpoints

const transformHook = (rw) => {
    const { breakpoints } = rw.theme;
    const { names, screens } = breakpoints;
    
    console.log(names);   
    // ["sm", "md", "lg", "xl", "2xl"]
    
    console.log(screens); 
    // { sm: 640, md: 768, lg: 1024, xl: 1280, "2xl": 1536 }
};

exports.transformHook = transformHook;

Properties

Property	Type	Description
names	Array	Ordered list of breakpoint names
screens	Object	Breakpoint names mapped to pixel widths

Common Patterns

Generate Responsive Sources

const transformHook = (rw) => {
    const { breakpoints } = rw.theme;
    const { names, screens } = breakpoints;
    const { image } = rw.props;
    
    const sources = names
        .filter(name => screens[name])
        .sort((a, b) => screens[b] - screens[a])
        .map(name => ({
            media: `(min-width: ${screens[name]}px)`,
            srcset: rw.resizeResource(image, screens[name] * 2),
            breakpoint: name,
            minWidth: screens[name]
        }));
    
    rw.setProps({ sources });
};

exports.transformHook = transformHook;

Build Responsive Classes

const transformHook = (rw) => {
    const { breakpoints } = rw.theme;
    const { columns } = rw.responsiveProps;
    
    // columns = { base: 1, md: 2, lg: 3 }
    
    const gridClasses = Object.entries(columns)
        .map(([breakpoint, cols]) => {
            const prefix = breakpoint === 'base' ? '' : `${breakpoint}:`;
            return `${prefix}grid-cols-${cols}`;
        })
        .join(' ');
    
    rw.setProps({
        gridClasses  // "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
    });
};

exports.transformHook = transformHook;

Responsive Visibility

const transformHook = (rw) => {
    const { hidden } = rw.responsiveProps;
    
    // hidden = { base: true, md: false }
    
    const visibilityClasses = Object.entries(hidden)
        .map(([breakpoint, isHidden]) => {
            const prefix = breakpoint === 'base' ? '' : `${breakpoint}:`;
            return isHidden ? `${prefix}hidden` : `${prefix}block`;
        })
        .join(' ');
    
    rw.setProps({ visibilityClasses });
};

exports.transformHook = transformHook;

Default Breakpoints

Elements typically uses Tailwind CSS breakpoints:

Name	Width
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Notes

• Breakpoints are defined by the active theme

• Use names when you need ordered iteration

• Use screens when you need to lookup specific widths

• Combine with rw.responsiveProps for per-breakpoint values