How to use the bpk-component-image.withLoadingBehavior function in bpk-component-image

To help you get started, we’ve selected a few bpk-component-image examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Skyscanner / backpack / packages / bpk-docs / src / pages / WebImagesPage / WebImagesPage.js View on Github external
import React from 'react';
import BpkImage, {
  BpkBackgroundImage,
  withLazyLoading,
  withLoadingBehavior,
} from 'bpk-component-image';
import BpkText from 'bpk-component-text';
import imagesReadme from 'bpk-component-image/README.md';
import * as SPACINGS from 'bpk-tokens/tokens/base.es6';
import * as BREAKPOINTS from 'bpk-tokens/tokens/breakpoints.es6';

import DocsPageBuilder from '../../components/DocsPageBuilder';

const documentIfExists = typeof window !== 'undefined' ? document : null;
const FadingImage = withLoadingBehavior(BpkImage);
const LazyLoadedImage = withLazyLoading(BpkImage, documentIfExists);
const FadingLazyLoadedImage = withLoadingBehavior(
  withLazyLoading(BpkImage, documentIfExists),
);

const image1 =
  'https://content.skyscnr.com/96508dbac15a2895b0147dc7e7f9ad30/canadian-rockies-canada.jpg';
const image2 =
  'https://content.skyscnr.com/8bd0d1b67b1bda63e5567a4c402402f2/iceland.jpg';
const image3 =
  'https://content.skyscnr.com/200946ddb82b7c026e6e186a7037b1f8/machu-picchu.jpg';
const image4 =
  'https://content.skyscnr.com/8a8ac17b591b61e6fe5d8f63414561cd/amsterdam-the-netherlands.jpg';
const image5 =
  'https://content.skyscnr.com/6c8f0e633bde70798a9d6f0a26cb6016/andalsnes-norway.jpg';
github Skyscanner / backpack / packages / bpk-docs / src / components / DocsPageBuilder / ComponentScreenshots.js View on Github external
import React from 'react';
import PropTypes from 'prop-types';
import BpkText from 'bpk-component-text';
import BpkPanel from 'bpk-component-panel';
import { cssModules } from 'bpk-react-utils';
import BpkImage, {
  withLazyLoading,
  withLoadingBehavior,
} from 'bpk-component-image';

import STYLES from './ComponentScreenshots.scss';

const getClassName = cssModules(STYLES);
const documentIfExists = typeof window !== 'undefined' ? document : null;
const LazyLoadingImage = withLoadingBehavior(
  withLazyLoading(BpkImage, documentIfExists),
);

let counter = 0;
const generateId = (title = '') => {
  counter += 1;
  return `${title.toLowerCase().replace(' ', '-')}-${counter}`;
};

const ComponentScreenshot = ({ title, subText, ...rest }) => {
  const subTextId = generateId(title);

  return (
github Skyscanner / backpack / packages / bpk-docs / src / pages / WebImagesPage / WebImagesPage.js View on Github external
import BpkImage, {
  BpkBackgroundImage,
  withLazyLoading,
  withLoadingBehavior,
} from 'bpk-component-image';
import BpkText from 'bpk-component-text';
import imagesReadme from 'bpk-component-image/README.md';
import * as SPACINGS from 'bpk-tokens/tokens/base.es6';
import * as BREAKPOINTS from 'bpk-tokens/tokens/breakpoints.es6';

import DocsPageBuilder from '../../components/DocsPageBuilder';

const documentIfExists = typeof window !== 'undefined' ? document : null;
const FadingImage = withLoadingBehavior(BpkImage);
const LazyLoadedImage = withLazyLoading(BpkImage, documentIfExists);
const FadingLazyLoadedImage = withLoadingBehavior(
  withLazyLoading(BpkImage, documentIfExists),
);

const image1 =
  'https://content.skyscnr.com/96508dbac15a2895b0147dc7e7f9ad30/canadian-rockies-canada.jpg';
const image2 =
  'https://content.skyscnr.com/8bd0d1b67b1bda63e5567a4c402402f2/iceland.jpg';
const image3 =
  'https://content.skyscnr.com/200946ddb82b7c026e6e186a7037b1f8/machu-picchu.jpg';
const image4 =
  'https://content.skyscnr.com/8a8ac17b591b61e6fe5d8f63414561cd/amsterdam-the-netherlands.jpg';
const image5 =
  'https://content.skyscnr.com/6c8f0e633bde70798a9d6f0a26cb6016/andalsnes-norway.jpg';

const components = [
  {

bpk-component-image

Backpack image component.

Apache-2.0
Latest version published 2 years ago

Package Health Score

70 / 100
Full package analysis

Similar packages