Exports a <ColumnTransition>
component which can be used to a render column of content which transitions smoothly from one child to the next.
The component will ensure that during the exit transition, the previously active element takes a constant size based on the last size while it was active.
You can treat your ColumnTransition
as a flexbox column that accepts arbitrary content.
Whenever its transitionKey
prop changes, the content will be transitioned out, and the new content transitioned in. If no transitionKey
is supplied, the children
prop will be used as the key.
import { ColumnTransition } from 'retil-transition'
function App() {
const { path, content } = useRouter()
return (
<ColumnTransition
className='main-content'
transitionKey={path}>
{content}
</ColumnTransition>
)
}
You can configue the appearance of the transition by supplying an object to the transitionConfig
prop, with the following keys:
initial
from
enter
exit
Internally, transitions use react-spring, so the transitionConfig
object supports any configuration that react-spring does.
import type { TransitionConfig } from 'retil-transition'
// These settings are handled by react-spring
const crossfadeSpringConfig = {
mass: 5,
tension: 50,
friction: 10,
clamp: true,
}
const crossfadeTransitionConfig: TransitionConfig = {
initial: {
opacity: 0,
},
from: {
opacity: 0,
},
enter: {
opacity: 1,
config: crossfadeSpringConfig,
},
exit: {
opacity: 0,
config: crossfadeSpringConfig,
},
}
function App() {
const { path, content } = useRouter()
return (
<ColumnTransition
className='main-content'
transitionConfig={crossfadeTransitionConfig}
transitionKey={path}>
{content}
</ColumnTransition>
)
}
Items rendered within a <ColumnTransition>
may opt to render their own transition in and out via the useTransitionHandleRefContext()
hook.
This hook returns a ref whose current value can be set to a TransitionHandle
object, whose methods will then be called to hide/show the item instead of applying the transition specified by the transitionConfig
prop.
interface TransitionHandle {
show: () => Promise<void>
hide: () => Promise<void>
}