@times-stories/image-container

The background image container template for the @times-stories suite of packages

Installation

$ yarn add @times-stories/image-container

Usage

This is the base component for many of the @times-stories page templates, and handles image placement / transition logic.

This component provides an interface for placing the focus point of your background image within a pre-defined safe area. This will work across any breakpoint, and will work for any image size.

The backgroundImage prop should be an object containing your image src and a focusPoint object with x and y percentages, defining where the focus point of your background image is.

The centerPoint props should be an object containing the x and y percentages defining where the safe area of your template is. If, for example, you had text positioned on the left of the template, then you may choose to define your safe area on the right hand side.

import Story from "@times-stories/story";
import Page from "@times-stories/page";
import ImageContainer from "@times-stories/image-container";

const backgroundImage = {
  src: `url/to/image`,
  focusPoint: {
    x: 30,
    y: 60
  }
};

const centerPoint = {
  x: 20,
  y: 40
};

export default () => (
  <ImageContainer
    backgroundImage={backgroundImage}
    centerPoint={centerPoint}
    withBlur={true}
    withOverlay={true}
    withImpact={false}
  >
    <p>Any JSX here</p>
  </ImageContainer>
);