search

americanexpress / react-albus

✨ React component library for building declarative multi-step flows.
Apache License 2.0
1.1k stars 89 forks source link

Prevent to unmount steps from DOM #23

Closed noashka closed 6 years ago

noashka commented 6 years ago

Hello! How I can prevent unmounting child elements? When I use simple CSSTransition without react-albus, I set prop 'unmountOnExit' to false. Component stays mounted after it reaches the 'exited' state

nathanforce commented 6 years ago

Hey thanks for reaching out.

Could you prepare an example on CodeSandbox showing your issue and we can try and work through it?

noashka commented 6 years ago

Sure. I'll prepare for you example. But a bit later. Thank you for quick response!

Examples: https://codesandbox.io/s/qqqq4oy296 - it's example for mount / unmount CSSTransition. It works. https://codesandbox.io/s/vn6mn04rq3 - it's example for mount / unmount CSSTransition with react-albus. React-albus ignores 'unmountOnExit' property

noashka commented 6 years ago

Can you look for examples, please ?

nathanforce commented 6 years ago

Hey I'm sorry. I'm not sure what your desired outcome is here. Are you wanting to animate your transitions between steps but keep the previous step mounted after the transition completes? Could you maybe describe your use case a bit? I'm having a hard time determining the problem.

noashka commented 6 years ago

Thank you for answer! About my use case: You quite right - I want to animate transitions between steps and keep the previous step mounted after the transition completed. I want to implement my transition animating with using transform (for example: translate and scale)

nathanforce commented 6 years ago

Ok. This component wasn't really designed to be used in that way. Wizard assumes that you will be rendering one step at a time and unmounting steps when they are inactive.

That being said, because of the flexibility provided by the render prop on Wizard, I was able to get an example that seems to be the groundwork for what you're asking.

https://codesandbox.io/s/l7pxonzyml

You can play with that idea and try to add your transitions if you'd like, but I feel that react-albus may not be suited for your use case.

Thanks!

noashka commented 6 years ago

Ok. Thank you for feedback! I'll think about your example.