react-fluid-header v1.0.4
react-fluid-header
Hero image header React component for fluid layouts
What it does?
This component makes it easy to set up a hero image as header background by pushing the image source and anchoring positions through the props and setting up style attribute appropriately. This allows to create fluid layouts with cover hero image, which has a unique background position specific for this image, allowing to control the position of the central image feature on the screen.
Installation
npm i -S react-fluid-header
Required CSS support code
CSS properties set up on the component are the following:
- background-image
- background-position
There's no extra code injected into style attribute, authors expected to supply the necessary styling code in a separate stylesheet. Suggested example:
header {
background-clip: content-box;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}
Use in JSX
This will set up /img/hero.jpg as a header background and anchor the point at 85% right and 20% down of the image dimension from the top left corner to serve as image focal point, if screen dimensions does not allow to show the whole image.
<Header anchorX="85%" anchorY="20%" src="/img/hero.jpg">
<h1>Some clickbait phrase</h1>
</Header>
By default, the hero image is positioned in the center of the screen.