npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bpk-component-image-css

v5.1.9

Published

Backpack image component.

Downloads

95

Readme

bpk-component-image

Backpack image component.

Installation

npm install bpk-component-image --save-dev

Usage

import React from 'react';
import BpkImage from '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 '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 '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 '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"
  />
);

Props

| Property | PropType | Required | Default Value | | ------------------------- | --------------------------- | -------- | ------------------------- | | altText | string | true | - | | src | string | true | - | | aspectRatio | number | true | - | | borderRadiusStyle | oneOf(BORDER_RADIUS_STYLES) | false | BORDER_RADIUS_STYLES.none | | className | string | false | null | | inView | bool | false | true | | loading | bool | false | false | | onLoad | func | false | null | | style | object | false | {} | | suppressHydrationWarnings | bool | false | false |

Note: The aspectRatio prop should be calculated as width/height of the original src image. It is used by the component to preserve space on screen while the image loads.

Note: All standard img attributes including srcSet are also supported.

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.

BpkBackgroundImage props

| Property | PropType | Required | Default Value | | ----------- | -------- | -------- | ------------- | | src | string | true | - | | aspectRatio | number | true | - | | className | string | false | null | | inView | bool | false | true | | loading | bool | false | false | | onLoad | func | false | null | | style | object | false | {} | | imageStyle | object | false | {} |