Make your React component sticky the easy way using render prop
Install
# Yarn
yarn add stickyard

# NPM
npm install --save stickyard
API
childrenfunction({})required
Render whatever you want, it's called with an object with the following properties:
registerContainer(ref)pass to the container's ref prop
registerSticky(ref)pass to the ref prop of whatever node within the container if you want to make it sticky
updateState()update the sticky state manually, this useful if your content is resizable
getStickyOffsets()return all the sticky-able elements' offsets
scrollToIndex(index)scroll to the specific sticky element by index
scrollTo(offset)scroll to the specific offset
The ref-register must be passed to the real DOM node, so if the component is a wrapper uppon DOM node, you need to register it to the underlying DOM node, using innerRef or something like that if provided.
stickyClassNamestring
The className to be attached to the element when it's sticky
This feature relies on classList which is not supported below IE10, so it won't take any effect on IE9 or below, you can use onSticky to implement by yourself.
onStickyfunction(index)
It's called when an element becomes sticky, -1 means there is no sticky element
Usage
import Stickyard from 'stickyard'

// pseudo code
<Stickyard>
  {({ registerContainer, registerSticky }) => (
    <div ref={registerContainer}>
      {items.map((item, index) => (
        <div key={item.key} ref={item.sticky ? registerSticky : null}>
          {item.label}
        </div>
      ))}
    </div>
  )}
</Stickyard>
Demo
Item 0
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30
Item 31
Item 32
Item 33
Item 34
Item 35
Item 36
Item 37
Item 38
Item 39
Item 40
Item 41
Item 42
Item 43
Item 44
Item 45
Item 46
Item 47
Item 48
Item 49
Item 50
Item 51
Item 52
Item 53
Item 54
Item 55
Item 56
Item 57
Item 58
Item 59
Item 60
Item 61
Item 62
Item 63
Item 64
Item 65
Item 66
Item 67
Item 68
Item 69
Item 70
Item 71
Item 72
Item 73
Item 74
Item 75
Item 76
Item 77
Item 78
Item 79
Item 80
Item 81
Item 82
Item 83
Item 84
Item 85
Item 86
Item 87
Item 88
Item 89
Item 90
Item 91
Item 92
Item 93
Item 94
Item 95
Item 96
Item 97
Item 98
Item 99