-
Notifications
You must be signed in to change notification settings - Fork 150
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Got it. Do you want to add a test for this?
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would it make sense to pass the state
into the children instead of the status
only?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good to me. @roderickhsiao @hankhsiao any concerns?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm
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
onStateChange
and pass it to children components