You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have a list of posts, and I have the post.
The list item is visually very similar to the post header and I'm trying to morph it.
But I have two problems here: I need to create morph 'instances' dynamically, somethink like id based, "on demand", and I need to share this instance to different files/components.
constPostHeader=({ ...post})=>{constuseMorphId(`post-${post.id}`)return<div{...morph}>...</div>}constPostPage=({ post })=>(<div><PostHeader{...post}/><div>...</div></div>)
After many attempts and tested workarounds, I was able to do it using a Context that saves the instances by id in its state, and a hook that ask for a instance by id: if it doesn't exist, it creates, if it exists, it uses the existing one.
Is there a more trivial way to share instances without prop drilling or context?
The text was updated successfully, but these errors were encountered:
renatorib
changed the title
Dynamically create useMorph instances and share them (useMorphId?)
How to create useMorph instances dynamically and share them (useMorphId?)
Jul 25, 2019
import{useMorph}from"react-morph";constmorphs=newMap();exportconstuseMorphId=id=>{// can't wrap a hook in a if statement, so we create it here even if we don't use itconstmorph=useMorph();if(!morphs.has(id))morphs.set(id,morph);returnmorphs.get(id);};
I have a list of posts, and I have the post.
The list item is visually very similar to the post header and I'm trying to morph it.
But I have two problems here: I need to create morph 'instances' dynamically, somethink like id based, "on demand", and I need to share this instance to different files/components.
Something like this:
listing page:
post page:
After many attempts and tested workarounds, I was able to do it using a Context that saves the instances by id in its state, and a hook that ask for a instance by id: if it doesn't exist, it creates, if it exists, it uses the existing one.
Code: https://codesandbox.io/s/nervous-mendeleev-ynrbq
(the magic is in morpher.js, and morphs are in pages/posts.js and pages/post.js)
But... questions:
The text was updated successfully, but these errors were encountered: