- 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
Image
A component for including images.
Default
With rounded corners
As a background image
With lazy loading
bpk-component-image
Backpack image component.
Installation
Check the main Readme for a complete installation guide.
Usage
import BpkImage from '@skyscanner/backpack-web/bpk-component-image';
import { breakpointDesktop, breakpointTablet } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
export default () => (
<BpkImage
altText="image description"
aspectRatio={816 / 544}
src="./path/to/image_1640.jpg"
/>
);
Accompanying HOCS
withLazyLoading
withLazyLoading is a HOC which adds an inView prop to components. This boolean prop can be used to determine if the component has been brought into view within a user's browser window. The BpkImage component will only load images if inView is true. Using this HOC can make pages load faster and prevent data being used to display images which are never seen by the user.
import BpkImage, { withLazyLoading, withLoadingBehavior } from '@skyscanner/backpack-web/bpk-component-image';
import { breakpointDesktop, breakpointTablet } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
// Support for SSR
const documentIfExists = typeof window !== 'undefined' ? document : null;
// withLazyLoading will not use document when rendered server side so it's safe
// pass null.
const LazyLoadedImage = withLazyLoading(BpkImage, documentIfExists);
export default () => (
<LazyLoadedImage
altText="image description"
aspectRatio={816 / 544}
src="./path/to/image_1640.jpg"
/>
);
withLoadingBehavior
withLoadingBehavior is a HOC which provides loading state for BpkImage. This allows the component to have different behaviour before and after loading completes. When the loading prop is set true, a spinner will be displayed. When this changes to false, the spinner will fade away and the loaded image and content will fade into view.
import BpkImage, { BpkBackgroundImage, withLazyLoading, withLoadingBehavior } from '@skyscanner/backpack-web/bpk-component-image';
import { breakpointDesktop, breakpointTablet } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
const FadingImage = withLoadingBehavior(BpkImage);
const FadingBackgroundImage = withLoadingBehavior(BpkBackgroundImage);
export default () => (
<div>
<FadingImage
altText="image description"
aspectRatio={816 / 544}
src="./path/to/image_1640.jpg"
/>
<FadingBackgroundImage
altText="image description"
aspectRatio={816 / 544}
src="./path/to/image_1640.jpg"
imageStyle={{
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: '50% 50%',
}}
/>
</div>
);
All together now
Combining withLazyLoading and withLoadingBehavior gives us a lazily loaded image that will show a spinner while the image loads.
import BpkImage, { withLazyLoading, withLoadingBehavior } from '@skyscanner/backpack-web/bpk-component-image';
import { breakpointDesktop, breakpointTablet } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
const documentIfExists = typeof window !== 'undefined' ? document : null;
const FadingLazyLoadedImage = withLoadingBehavior(withLazyLoading(BpkImage, documentIfExists));
export default () => (
<FadingLazyLoadedImage
altText="image description"
aspectRatio={816 / 544}
src="./path/to/image_1640.jpg"
/>
);
BpkBackgroundImage
The background image component is useful for setting background images in CSS that can then contain other elements. It supports the same HOCs as BpkImage.
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:54