Kinetic-react NPM

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>
  )
}

preview

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