kin.js

// before
<div
  className={style.dragScroll}
  style={{transform: `translateX(-${position}px)`}}
  ref={c => this.setRef(c)}
>
  {ref && <Kinetic allowScroll={direction !== 'y'} max={ref.offsetWidth - 200} direction='x' element={ref} broadcast={this.setPosition} />}

  {children}
</div>

// after
<FlickList
  allowScroll={direction !== 'y'}
  direction='x'
  getRef={this.getRef}
  max={ref && ref.offsetWidth - 200}
>
  {scroll => (
    <div className={style.dragScroll} style={{transform: `translateX(-${scroll}px)`}}>
      {children}
    </div>
  )}
</FlickList>