Breakpoint

Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.

The following examples replicate each of the examples from the Bootstrap documentation: https://getbootstrap.com/docs/5.3/layout/breakpoints/

Bindable Example

The current breakpoint is: undefined

            
            <script lang="ts">
    let currentBreakpoint = $state<BreakpointEnum | undefined>(undefined);;
</script>
<BreakpointListener bind:currentBreakpoint />
<p>The current breakpoint is: <strong>{currentBreakpoint != null ? BreakpointEnum[currentBreakpoint] : 'undefined'}</strong></p>

Render On Single Breakpoint Example

The following content will only render on medium screens:

            
            <BreakpointListener renderOn={BreakpointEnum.MD}>
    <p>👋🏼😁 Hello Medium Screens</p>
</BreakpointMonitor>

Render On Multiple Breakpoint Example

The following content will only render on medium and large screens:

            
            <BreakpointListener renderOn={[BreakpointEnum.MD, BreakpointEnum.LG]}>
    <p>👋🏼😁 Hello Medium and Large Screens</p>
</BreakpointMonitor>

OnChange Callback Example

The current breakpoint is: undefined

The previous breakpoint is: undefined

            
            <BreakpointListener
    onChange={(changeEvent) => {
        onChangeCurrentBreakpoint = changeEvent.current;
        onChangePreviousBreakpoint = changeEvent.previous;
    }} />
<p>
    The current breakpoint is: <strong>{onChangeCurrentBreakpoint != null ? BreakpointEnum[onChangeCurrentBreakpoint] : 'undefined'}</strong>
</p>
<p>
    The previous breakpoint is: <strong>{onChangePreviousBreakpoint != null ? BreakpointEnum[onChangePreviousBreakpoint] : 'undefined'}</strong>
</p>

OnBreakUp Callback Example

The breakpoint broke up from undefined

The breakpoint broke up to: undefined

            
            <BreakpointListener
    onBreakUp={(breakEvent) => {
        onBreakUpFromBreakpoint = breakEvent.from;
        onBreakUpToBreakpoint = breakEvent.to;
    }} />
<p>
    The breakpoint broke up from <strong>{onBreakUpFromBreakpoint != null ? BreakpointEnum[onBreakUpFromBreakpoint] : 'undefined'}</strong>
</p>
<p>
    The breakpoint broke up to: <strong>{onBreakUpToBreakpoint != null ? BreakpointEnum[onBreakUpToBreakpoint] : 'undefined'}</strong>
</p>

OnBreakDown Callback Example

The breakpoint broke down from undefined

The breakpoint broke down to: undefined

            
            <BreakpointListener
    onBreakDown={(breakEvent) => {
        onBreakDownFromBreakpoint = breakEvent.from;
        onBreakDownToBreakpoint = breakEvent.to;
    }} />
<p>
    The breakpoint broke down from <strong>{onBreakDownFromBreakpoint != null ? BreakpointEnum[onBreakDownFromBreakpoint] : 'undefined'}</strong>
</p>
<p>
    The breakpoint broke down to: <strong>{onBreakDownToBreakpoint != null ? BreakpointEnum[onBreakDownToBreakpoint] : 'undefined'}</strong>
</p>

API Reference

Props

Name	Type	Default	Description
`currentBreakpoint`	`BreakpointEnum \| undefined`	`undefined`	Reference to the current breakpoint
`isDisabled`	`boolean`	`false`	Disables the breakpoint monitor if set to true.
`renderOn`	`BreakpointEnum \| BreakpointEnum[] \| undefined`	`undefined`	Controls whether the children are rendered based on the current breakpoint.

Events

Name	Type	Description
`onChange`	`(changeEvent: ChangeEvent) => void`	Fired when the breakpoint changes.
`onBreakUp`	`(breakEvent: BreakEvent) => void;`	Fired when the breakpoint is about to change to a larger size (at the start of the transition).
`onBreakDown`	`(breakEvent: BreakEvent) => void;`	Fired when the breakpoint is about to change to a smaller size (at the start of the transition).