Responsive offset prop

I need to make the offset prop responsive in any way. I want the stickiness behaviour to be based on the height of 2 elements (header and subheader).

At the moment I’m trying to find a fixed value for the offset that works well across our supported devices.

The other quick solution, I have in mind is to have 2 separate sticky elements (one for desktop and one for tablet). I would really like to avoid doing this.

Thanks again for this awesome package. There are so few packages that deliver this in a small and convenient way. 👍

[danielberndt]

Two approaches I could offer:

1. make the surrounding container responsive. e.g. <div style={{marginTop: '5vh'}}><StickyBox/></div>
2. Use something like react-media:

     <Media query="(max-width: 599px)">
        {matches =>
          <StickyBox offset={matches ? 20 : 40}/>
        }
      </Media>

[danielberndt]

No worries! And yes, so far this library concerned with just doing one thing reasonably well. Offering too many features would at some point probably be a bit too much to maintain 😃