Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface TransitionHookReturnValue<E>

remarks

@since 4.0.0

Type parameters

  • E: HTMLElement

    An HTMLElement type used for the ref required for the transition.

Hierarchy

Index

Properties

Methods

Properties

appearing

appearing: boolean

Boolean if this is the first {@link TransitionAction.appear} transition. This will be true during the first transition if {@link TransitionAction.appear} was also true. Otherwise it will be false.

ref

ref: (instance: null | E) => void

Type declaration

    • (instance: null | E): void

    • A ref that is required for the transition to occur and should be passed to the element affected by the transition.

      Parameters

      • instance: null | E

      Returns void

rendered

rendered: boolean

Boolean if the element should be rendered or not. This will always be true if the TransitionOptions.temporary is false. Otherwise, it will be true when not the "exited" TransitionStage.

stage

stage: TransitionStage

{@inheritDoc TransitionStage}

Methods

transitionTo

  • A function that can be used to specifically set the transition to a specific stage. This shouldn't really be used too much and is really just useful for "appear only transitions" that do not unmount the child elements.

    example

    Simple Example

    import { ReactElement, useEffect, useRef } from "react";
    import { useCSSTransition } from "@react-md/transition";
    import { useRouter } from "react-router-dom";

    function Example(): ReactElement {
      const { pathname } = useRouter();
      const { elementProps, transitionTo } = useCSSTransition({
        transitionIn: true,
        timeout: 1000,
        classNames: "some-enter-transition",
      });

      useEffect(() => {
        // Do not trigger transition on first load.
        if (prevPathname.current === pathname) {
          return;
        }

        prevPathname.current = pathname;
        transitionTo("enter");
      }, [pathname, transitionTo]);

      return <div {...elementProps}>{content}</div>;
    }

    Parameters

    Returns void

Generated using TypeDoc