kinetic-react

react bindings for kinetic scrolling

This library implements native flick list scrolling entirely in JavaScript. It's useful if you have an absolutely positioned element and need to transform it in a way that feels native. I couldn't have done it without this article

Install

$ npm install kinetic-react --save

Usage

import Kinetic from 'kinetic-react'

..

transformElement = ({ position }) => {
  this.setState({ position })
}

render () {
  const { position } = this.state

  return (
    <div style={{ transform: `translateY(${position}px)` }}>
      {this.list && <Kinetic element={this.list} broadcast={this.transformElement}/>}

      <List ref={c => this.list = c} {...props} />
    </div>
  )
}

API

| Param | Type | functionality | required | |----------------|---------|-----------------|-----------------| | direction | String ('y', 'x') | tell the library to calculate sizes based on height or width of element | false | | broadcast | function | notify HOC of position changes | true | | max | Number | maxiumum amount to allow library to scroll | false | | min | Number | minimum amount to allow library to scroll | false | | element | ref | element to measure / record scrolls on | true |

TODO:

Publish example

License

MIT © Jack Hanford