TransitionReplace

Manages a transition when replacing content. By default, this component will transition the height and do a cross-fade. The transition can be customized.

TransitionReplace expects only one child at any time. Swap content inside the component (usually based on some state).

Basic usage

() => {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div>
      <TransitionReplace className="mb-3">
        {isEditing ? (
          <form key="the-form">
            <label htmlFor="name">First Name</label>
            <Input type="text" value="some name" />
          </form>
        ) : (
          <div key="other">
            <h4 className="mt-0">First Name</h4>
            <p>Some name</p>
            <p>Some description text.</p>
          </div>
        )}
      </TransitionReplace>
      <Button variant="primary" onClick={() => setIsEditing(!isEditing)}>
        Toggle
      </Button>
    </div>
  );
};

() => {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div>
      <TransitionReplace className="mb-3">
        {isEditing ? (
          <form key="the-form">
            <label htmlFor="name">First Name</label>
            <Input type="text" value="some name" />
          </form>
        ) : (
          <div key="other">
            <h4 className="mt-0">First Name</h4>
            <p>Some name</p>
            <p>Some description text.</p>
          </div>
        )}
      </TransitionReplace>
      <Button variant="primary" onClick={() => setIsEditing(!isEditing)}>
        Toggle
      </Button>
    </div>
  );
};

IMPORTANT NOTE: You must provide the key prop for all children, even when only rendering a single item. This is how React will determine that a child is new rather than just updated.

Custom Transition

TransitionReplace uses CSSTransition from the ReactTransitionGroup package. The transitionClassNames prop is a pass-through to CSSTransitions's classNames prop. You can use this to change the crossfade animation. By default this value is pgn__transition-replace and the cross-fade is defined as below:

.pgn__transition-replace-enter {
  opacity: 0;
}
.pgn__transition-replace-enter-active {
  opacity: 1;
  z-index: 1;
  transition: opacity 300ms ease;
}
.pgn__transition-replace-exit {
  opacity: 1;
}
.pgn__transition-replace-exit-active {
  opacity: 0;
  transition: opacity 300ms ease;
}

If you change the timing in CSS you should also match it using the enterDuration and exitDuration props.

Note:

Children are not required. When this component is empty, the a child inserted into it will not transition the height (from zero). No "replacement" transition will occur and new content will pop in like a normal insert. This behaviour makes it easier to work with asyncronously loaded content (for example: during the first load you don't have to do any special handling).

Example

function DemoTransitionReplace() {
  const contentOptions = [
    <blockquote className="h2 m-0" key={0}>
      <p>
        You know the golden rule, don’t you boy? Those who have the gold make
        the rules.
      </p>
      <footer>— Crazy hunch-backed old guy in Aladdin</footer>
    </blockquote>,
    <blockquote className="m-0" key={1}>
      <p>People say nothing is impossible, but I do nothing every day.</p>
      <footer>— A. A. Milne</footer>
    </blockquote>,
    <blockquote className="h2 m-0" key={2}>
      <p>
        I won’t go into a big spiel about reincarnation, but the first time I
        was in the Gucci store in Chicago was the closest I’ve ever felt to
        home.
      </p>
      <footer>— Kanye</footer>
    </blockquote>,
    <blockquote className="m-0" key={3}>
      <p>The first time I see a jogger smiling, I’ll consider it.</p>
      <footer>— Joan Rivers</footer>
    </blockquote>,
  ];

  const [currentContentIndex, setCurrentContentIndex] = useState(0);
  const changeContent = () => {
    setCurrentContentIndex((currentContentIndex + 1) % contentOptions.length);
  };

  return (
    <div>
      <Button variant="primary" className="mb-2" onClick={changeContent}>
        Next Quote
      </Button>
      <div
        style={{
          background: '#eee',
          padding: '1rem',
          maxWidth: '15rem',
        }}
      >
        <TransitionReplace>
          {contentOptions[currentContentIndex]}
        </TransitionReplace>
      </div>
    </div>
  );
}

function DemoTransitionReplace() {
  const contentOptions = [
    <blockquote className="h2 m-0" key={0}>
      <p>
        You know the golden rule, don’t you boy? Those who have the gold make
        the rules.
      </p>
      <footer>— Crazy hunch-backed old guy in Aladdin</footer>
    </blockquote>,
    <blockquote className="m-0" key={1}>
      <p>People say nothing is impossible, but I do nothing every day.</p>
      <footer>— A. A. Milne</footer>
    </blockquote>,
    <blockquote className="h2 m-0" key={2}>
      <p>
        I won’t go into a big spiel about reincarnation, but the first time I
        was in the Gucci store in Chicago was the closest I’ve ever felt to
        home.
      </p>
      <footer>— Kanye</footer>
    </blockquote>,
    <blockquote className="m-0" key={3}>
      <p>The first time I see a jogger smiling, I’ll consider it.</p>
      <footer>— Joan Rivers</footer>
    </blockquote>,
  ];

  const [currentContentIndex, setCurrentContentIndex] = useState(0);
  const changeContent = () => {
    setCurrentContentIndex((currentContentIndex + 1) % contentOptions.length);
  };

  return (
    <div>
      <Button variant="primary" className="mb-2" onClick={changeContent}>
        Next Quote
      </Button>
      <div
        style={{
          background: '#eee',
          padding: '1rem',
          maxWidth: '15rem',
        }}
      >
        <TransitionReplace>
          {contentOptions[currentContentIndex]}
        </TransitionReplace>
      </div>
    </div>
  );
}

TransitionReplace Props API

children element Required
Specifies an additional class for the base element
enterDuration number Required
Duration of the element appearance transition.
Default300
exitDuration number Required
Duration of the element dismiss transition.
Default300
className string Required
Specifies class name to append to the base element.
onChildEnter func Required
A Transition callback fired immediately after the enter or appear class is applied.
onChildEntering func Required
A Transition callback fired immediately after the enter-active or appear-active class is applied.
onChildEntered func Required
A Transition callback fired immediately after the enter or appear classes are removed and the done class is added to the DOM node.
onChildExit func Required
A Transition callback fired immediately after the exit class is applied.
onChildExiting func Required
A Transition callback fired immediately after the exit-active is applied.
onChildExited func Required
A Transition callback fired immediately after the exit classes are removed and the exit-done class is added to the DOM node.
transitionStyles shape Required {
entering: shape {},
entered: shape {},
exiting: shape {},
exited: shape {},
}
An object that specifies transition styles.
Default{}
transitionClassNames string Required
Specifies class name to append to the Transition.
Default'pgn__transition-replace'

Paragon Design System

TransitionReplace

Basic usage

Custom Transition

Note:

Example

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

TransitionReplace

Basic usage#

Custom Transition#

Note:#

Example#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic usage

Custom Transition

Note:

Example