React components transition live example!

Scroll down to updates and issues

Use case

A very small but useful React component, which allows to smart transition between components without adding unnecessary state's hooks to render conditionally

Something like React router but simplified and without rendering based on URL. Just more static

Instaling

1  npm i react-components-transition

Usage

Initializing

1  import { ComponentsTransition } from "react-components-transition";
2
3  const Component () => {
4
5
6    const firstVisibleChildKey = "example2"
7
8    return (
9      <>
10        <ComponentsTransition firstVisible={firstVisibleChildKey}>
11
12          {/* At Least 2 components and first given is visible on first render if not specified in 'firstVisible' prop */}
13
14          <Exmaple1 key="example1"></Example>
15          <Exmaple2 key="example2"></Example>
16        </ComponentsTransition>
17      </>
18    );
19  }

Switching component

1  import { TransitionButton } from "react-components-transitionn";
2
3  const componentKey = "example2"
4
5  const Example1 = () => {
6    return <TransitionButton show={componentKey}>Show example 2 component</TransitionButton>
7  }

Or with animations

1  import { TransitionButton } from "react-components-transitionn";
2
3  const componentKey = "example2"
4
5  const Example1 = () => {
6    return (
7      <TransitionButton show={componentKey}
8      animationIn={{ className: "animationIn", duration: 500 }}     // Animation in to new rendered child
9      animationOut={{ className: "animationOut", duration: 500 }}>  // Animation out to already rendered child
10
11        Show example 2 component
12      </TransitionButton>
13    );
14  };

In css

1/* CSS file of Exmaple1 component */
2
3/* Remember to give unique animation name!!! */
4
5@keyframes animationOut {
6  0% {
7    transform: scale(1);
8  }
9  100% {
10    transform: scale(0);
11  }
12}
13
14.animationOut {
15  transform: scale(1);
16  animation: animationOut 500ms forwards;
17}

1/* CSS file of Exmaple2 component */
2
3/* Remember to give unique animation name!!! */
4
5@keyframes animationIn {
6  0% {
7    transform: scale(0);
8  }
9  100% {
10    transform: scale(1);
11  }
12}
13
14.animationIn {
15  transform: scale(0);
16  animation: animationIn 500ms forwards;
17}

Manipulate from outside

1  import { ComponentsTransition, TransitionChild } from "react-components-transition";
2
3  const Component () => {
4
5    return (
6      <>
7        <ComponentsTransition>
8
9          // Remember to give unique key
10
11          <TransitionChild isStatic={true} key="OutsideComponentWrapper">
12            <OutsideComponent key="OutsideComponent"></OutsideComponent>
13          </TransitionChild>
14
15          <Exmaple1 key="example1"></Example>
16          <Exmaple2 key="example2"></Example>
17        </ComponentsTransition>
18      </>
19    );
20  }

Or

1  import { ComponentsTransition, TransitionChild } from "react-components-transition";
2
3  const Component () => {
4    const divRef = useState(null)
5
6    return (
7      <>
8        <div ref={divRef}></div>
9        <ComponentsTransition>
10
11          // Remember to give unique key
12
13          <TransitionChild key="OutsideComponentWrapper" isStatic={true} renderTo={divRef}>
14            <OutsideComponent key="OutsideComponent"></OutsideComponent>
15          </TransitionChild>
16
17          <Exmaple1 key="example1"></Example>
18          <Exmaple2 key="example2"></Example>
19        </ComponentsTransition>
20      </>
21    );
22  }

Last update 3.1.0

• Added possibility to choose context on button (f.e if u want to use other transition context in other ComponetsTransition)

Update 2.4.1 -> 2.4.7

• Added possibility to choose render first child

Update 2.4.0

• Fixed issues with styling (every given child in was wrapped into single div element what leads to styles problems)

Update 2.3.0

• Changed animation. It is possbile now to give an "animationIn" and "animationOut"

Update 2.1.0 -> 2.2.1

• Now is possible to manipulate children from outside element which is always visible
• And move out from ComponentsTransition

Update 2.0.2 -> 2.0.3

• Fixed bugs with rendering components when already is showing one (prohibiting rendering more then 2 components in time)

Update 2.0.1

• Changed render method:
  • New showed child always display before (on html page) current hiding child. (There was bug with correct positioning elements)
  • Current showing child always is visible on the top of others (has the highest z-index)

Update 2.0.0

• Added smooth transitions between rerenders based on CSS class

What's next?

Probably maybe any async/await rendering?

Any suggestions? Write to: s.stepniak01@gmail.com