Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface CSSTransitionHookReturnValue<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.

className

className: undefined | string

The current transition class name or undefined.

elementProps

elementProps: CSSTransitionElementProps<E>

This can be used so that you don't need to destructure multiple props from the hook return value to pass to the transitioning component.

example

Simple Example

import type { ReactElement } from "react";
import { useCSSTransition } from "@react-md/transition";

interface ExampleProps {
  transitionIn: boolean;
  children: ReactNode;
}

function Example({ transitionIn, children }: ExampleProps): ReactElement | null {
  const { elementProps, rendered } = useCSSTransition({
    timeout: 150,
    classNames: "example",
    transitionIn,
  });

  if (!rendered) {
    return null;
  }

  return <div {...elementProps}>{children}</div>
}
example

Verbose Version

import type { ReactElement } from "react";
import { useCSSTransition } from "@react-md/transition";

interface ExampleProps {
  transitionIn: boolean;
  children: ReactNode;
}

function Example({ transitionIn, children }: ExampleProps): ReactElement | null {
  const { ref, className, rendered } = useCSSTransition({
    timeout: 150,
    classNames: "example",
    transitionIn,
  });

  if (!rendered) {
    return null;
  }

  return <div ref={ref} className={className}>{children}</div>
}

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