# Breakpoint

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

Source: https://bootstrap-svelte.vercel.app/layout/breakpoint — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

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

---

## Bindable Example

```html
<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

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

## Render On Multiple Breakpoint Example

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

## OnChange Callback Example

```html
<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

```html
<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

```html
<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). |