magic component for transitions between screens
[work in progress]
yarn add freezus
import Transition from 'freezus'
// ...
<Transition
id={key} // change this for every transition
onEnter={async function*() => ...}
onExit={async function*() => {
// do whatever!
// the previous render sticks around until this function exits
// and by magic, redux state is frozen inside it!
// local state and everything else works as expected
// you can now manually animate that old element out,
// do a shared element transition, whatever.
// use jquery for all I care
// refs are doubly useful here :)
}}>
<SomeContent/>
</Transition>
<Transition/>
abstracts that for youasync generators handle cancellation pretty nicely
onExit={async function*() => {
try{
await sleep(1000)
}
finally {
const isCancelled = yield;
// do the thing
}
}}
by combining reduce
and the yield
s from onEnter
/onExit
, you can
implement a redux-like pipeline to manage state. the default reducer is
(x, y) => y
i.e. - it saves the last action as the state. You can read
from this state with Transition.Consumer
[todo];
todo -
<ReactTransition
that matches the popular one, good for migrating