No clean way to force-update Sticky
karmeleon opened this issue · 7 comments
I've got a use case wherein I have a <StickyContainer/> on the right-hand side of the page that expands to the left when the user clicks a button, remaining sticky the whole time. Like this! Since this action doesn't fire any of the events that <StickyContainer/> listens for, its left hand side moves to the left but the child <Sticky/> and its contents don't until I scroll the page a tick. If I manually trigger an e.g. scroll event on the element I get from context.getParent(), it updates properly, but it feels hacky. I'd like a param passed from <Sticky/> to its child render function that I can invoke in order for the layout to update.
Ah interesting! Good point, that does seem like a viable use-case. Do you have any specific API in mind? First thought would be an additional argument passed to the render callback, but I'm open to suggestions.
Yeah I like the render argument idea! Easy to pass into whatever child components may want it, but equally easy to ignore if you don't need it.
I want this too.
For now, as a workaround you can do window.dispatchEvent(new Event('scroll')) from anywhere, and it tricks the Sticky into re-rendering.
really want it to be fixed asap, can't even wait for 6.1
I have a layout that has a transition in changing width
That adds an extra challenge to the code, idk when to fire the scroll event
too early the sticky component won't update, too late the animation just become ugly
Good thing there's a workaround then @marklai1998! I haven't had much time to dedicate to developing react-sticky, other projects have taken priority.
@vcarl The scroll event workaround suggested by @callumlocke is fantastic. Perhaps that could be included in the README as a quick fix for cases where we need to trigger a sticky check?
Good idea! I'm happy to merge a PR if you want to submit one @Simon-Tang :)