- Welcome
- Getting started
- Latest updates
- Foundations
-
Components
- Accordion
- Alert
- Alignment
- App Search Modal
- Aria live
- Autosuggest
- Badge
- Banner alert
- Bar chart
- Blockquote
- Bottom navigation
- Bottom sheet
- Breadcrumb
- Breakpoint
- Button
- Calendar
- Card
- Card list
- Card button
- Carousel
- Checkbox
- Chip
- Chip group
- Code
- Content cards
- Data Table
- Datepicker
- Description list
- Dialog
- Divider
- Drawer
- Field Set
- Flare
- Flat list
- Flight leg
- Floating action button
- Floating notification
- Form label
- Form validation
- Graphic promotion
- Horizontal navigation
- Icon
- Image
- Image Gallery
- Infinite scroll
- Info Banner
- Inset Banner
- Link
- List
- Map
- Mobile scroll container
- Modal
- Navigation bar
- Navigation Tab Group
- Nudger
- Overlay
- Page indicator
- Pagination
- Panel
- Phone input
- Picker
- Popover
- Price
- Progress bar
- Radio button
- Rating
- Rating Bar
- Scrollable calendar
- Search Modal
- Section header
- Section list
- Select
- Skeleton
- Skip link
- Slider
- Snackbar
- Snippet
- Spinner
- Split input
- Star rating
- Swap Button
- Switch
- Table
- Text
- Text input
- Theming
- Ticket
- Toast
- Tooltip
- Touchable native feedback
- Touchable overlay
- Search Input Summary
- Content
- Accessibility
- Contributing
- Localisation
Breakpoint
The breakpoint component allows information to be displayed in different ways depending on the screen size.
bpk-component-breakpoint
Backpack breakpoint component.
Installation
Check the main Readme for a complete installation guide.
Usage
import BpkBreakpoint, { BREAKPOINTS } from '@skyscanner/backpack-web/bpk-component-breakpoint';
export default () => (
<BpkBreakpoint query={BREAKPOINTS.MOBILE}>
{isActive => (isActive ? <span>Mobile viewport is active</span> : <span>Mobile viewport is inactive</span>)}
</BpkBreakpoint>
<BpkBreakpoint query={BREAKPOINTS.TABLET}>
<span>Tablet viewport is active</span>
</BpkBreakpoint>
);
Server Side Render (SSR) Support
You can pass matchSSR which will instruct the breakpoint to match any time it is rendered on the server. You can use this to estimate what breakpoint is likely to match on the client-side.
import { isTablet, isMobilePhone } from 'some-device-detection';
<BpkBreakpoint query={BREAKPOINTS.TABLET} matchSSR={isTablet}>
<span>Tablet viewport is active OR we are rendering on the server-side</span>
</BpkBreakpoint>
<BpkBreakpoint query={BREAKPOINTS.MOBILE} matchSSR={isMobilePhone}>
<span>Mobile viewport is active AND we are rendering on the client-side</span>
</BpkBreakpoint>
If you match to a different breakpoint when rendering on the server, than what is matched to in the traveller's browser, then React will print a warning saying there is a mismatch.
Testing
When writing tests for any components that use BpkBreakpoint, you will have to mock either the BpkBreakpoint component or the underlying useMediaQuery. This is because the window.matchMedia function that we rely on does not exist in the jest testing environment.
A mock were you only wanted your mobile BpkBreakpoint to render:
import { useMediaQuery, BREAKPOINTS } from '@skyscanner/backpack-web/bpk-component-breakpoint';
jest.mock('@skyscanner/backpack-web/bpk-component-breakpoint', () => {
__esModule: true,
...jest.requireActual('@skyscanner/backpack-web/bpk-component-breakpoint'),
useMediaQuery: jest.fn(),
});
describe('tests', () => {
it('my test', () => {
(useMediaQuery as jest.Mock).mockImplementation(
(query: string) => query === BREAKPOINTS.MOBILE,
);
})
})
A simpler mock were you want all BpkBreakpoints to render:
jest.mock('@skyscanner/backpack-web/bpk-component-breakpoint', () => {
__esModule: true,
...jest.requireActual('@skyscanner/backpack-web/bpk-component-breakpoint'),
useMediaQuery: () => true,
});
Props
Check out the full list of props on Skyscanner's design system documentation website.
Props
Made with ❤️ by Skyscanner © 2024
© 2024 Skyscanner Backpack. Page last updated on Oct 2, 2023, 15:49