react-stretchy-header

A stretchy image-header for react (DOM), like that seen on ios-native.

There is a demo here, but you'll need to view it on iphone to see the effect.

usage

npm i -S react-stretchy-header

Then, in your code:

import StretchyHeader from 'react-stretchy-header'

const App = () => (<div>
  <StretchyHeader height={200}  image='http://lorempixel.com/600/300/cats/'>
    <div>CONTENT GOES HERE</div>
  <StretchyHeader>
</div>)

Props

name	type	required	default	default
onScroll	func	false	scrollTop => {}	called with param scrollTop on scroll
height	number	false	300	height of the image
image	string	false		URL of the image
className	string	false	'StretchyHeader'	className(s) for this component

This looks more jerky than it is.

thanks

I got a lot of ideas from here.