@times-stories/background-container
v1.1.2
Published
> The background container for the `@times-stories` suite of packages
Downloads
8
Keywords
Readme
@times-stories/background-container
The background container for the
@times-stories
suite of packages
Installation
$ yarn add @times-stories/background-container
Usage
The background-container
duplicates functionality from image-container
.
For information on image placement and transition logic see
@times-stories/image-container
.
It is also possible to display a background Brightcove video.
import Story from "@times-stories/story";
import Page from "@times-stories/page";
import BackgroundContainer from "@times-stories/background-container";
export default () => (
<Story>
<Page>
{props => (
<BackgroundContainer
{...props}
backgroundImage={{
src: backgroundImage,
focusPoint: {
x: 50,
y: 50
}
}},
/>
)}
</Page>
</Story>
);
export const withVideo = () => (
<Story>
<Page>
{props => (
<BackgroundContainer
{...props}
backgroundVideo: {
accountId: "5436121856001",
playerId: "H1xC44NNKb",
videoId: "6010720526001",
},
/>
)}
</Page>
</Story>
);