kinetic-react

0.4.2 • Public • Published

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

TODO:

Publish example

License

MIT © Jack Hanford

Package Sidebar

Install

npm i kinetic-react

Weekly Downloads

0

Version

0.4.2

License

MIT

Last publish

Collaborators

  • hanford