Feature- Request: Add onStickyChange to <Sticky/>

[hepiyellow]

I'm submitting a ...

• bug report
• feature request
• support request

What is the current behavior?

If I want to lift the isSticky state of a certain <Sticky/> to the parent component, I can't do it.

(setting an ancestor's state within the <Sticky/>'s "children as a function" call yields a React warning (render should not have side-effects)

What is the expected or desired behavior?

Why do you want this? What use case do you have?

My use-case is that when the <Sticky/> gets sticky, I want to render it in some other container (not with position: fixed.

Another use-case could be, styling the <StickyContainer/> (Or another ancestor of the <Sticky/>) differently when the content isSticky=true.

Is there anything else I should know?

I like this lib.

[vcarl]

I agree this might be useful functionality to add to StickyContainer. To implement something like it for now, you can have render a component like

class App extends React.Component {
  render() {
    return (
      <StickyContainer>
        <Sticky>
          {stickyProps => (
            <CustomStickyElement
              onStickyChange={handleStickyChange}
              stickyProps={stickyProps}
            />
          )}
        </Sticky>
      </StickyContainer>
    );
  }
}

where CustomStickyElement checks for changes to isSticky and calls the handler accordingly.