Introduce children function support #120
Conversation
|
Thank you for submitting this pull request, however I do not see a valid CLA on file for you. Before we can merge this request please visit https://yahoocla.herokuapp.com/ and agree to the terms. Thanks! 😄 |
|
@maxmalov have you looked into the React Hooks work that came out recently? Would this help as well? |
|
I'm not sure I follow you since I need to do extra state management even with hooks API, like I need to create one more component function StickyWrapper() {
const [status, setStatus] = useState();
return (
<Sticky onStateChange={setStatus}>
<MyComponentToStick status={status} />
</Sticky>
}On the other hand, children function exposes existing state to children components, so I don't need to create any wrapper components and use it directly in the application code <Sticky>
{status => <MyComponentToStick status={status} />}
</Sticky> |
| return ( | ||
| <div ref={(outer) => { this.outerElement = outer; }} className={outerClasses} style={outerStyle}> | ||
| <div ref={(inner) => { this.innerElement = inner; }} className='sticky-inner-wrapper' style={innerStyle}> | ||
| {this.props.children} | ||
| {typeof children === 'function' ? children({ status: this.state.status }) : children} |
There was a problem hiding this comment.
Would it make sense to pass the state into the children instead of the status only?
There was a problem hiding this comment.
Not sure other things from the component state should be available to children, also onStateChange passes status only too https://github.com/yahoo/react-stickynode/blob/master/src/Sticky.jsx#L290-L293
There was a problem hiding this comment.
This looks good to me. @roderickhsiao @hankhsiao any concerns?
|
react-stickynode 2.1.0 published 🎉 |
I've found that children function support allows to pass sticky state to children components in a very handy way. This approach can be used instead of introducing another wrapper component that will handle state change with
onStateChangeand pass it to children components