captivationsoftware / react-sticky

<Sticky /> component for awesome React apps
MIT License
2.64k stars 385 forks source link

Allow placeholder padding override? #198

Closed ardok closed 6 years ago

ardok commented 7 years ago

Hello,

Is there a way to have custom padding placeholder? https://github.com/captivationsoftware/react-sticky/blob/master/src/Sticky.js#L59

Maybe expose this particular section:

    const placeholderClientRect = this.placeholder.getBoundingClientRect();
    const contentClientRect = this.content.getBoundingClientRect();
    const calculatedHeight = contentClientRect.height;

To be something like:

getPlaceholderHeight(placeholder, content) {
    const placeholderClientRect = placeholder.getBoundingClientRect();
    const contentClientRect = content.getBoundingClientRect();
    return contentClientRect.height;
}

Then in my code, if I want custom placeholder height, I could do something like:

class MyOwnSticky extends Sticky {
  getPlaceholderHeight(placeholder, content) {
    // My custom height, I could just return any number I want here
    return 20;
  } 
}

...

<StickyContainer>
  <MyOwnSticky topOffset={123}>
    {() => {...}}
  </MyOwnSticky>
</StickyContainer>

I'm not sure whether that's the "best" way. I'm trying to avoid using CSS.

Reading these 2 issues seem to be utilizing CSS: https://github.com/captivationsoftware/react-sticky/issues/125 https://github.com/captivationsoftware/react-sticky/issues/151

dbarbalato commented 7 years ago

If you made a PR for this feature I will bring it in