Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface CollapseTransitionHookReturnValue<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: Readonly<CollapseElementProps<E>>

This is just a convenience object so that you don't need to destructure as many variables to pass to an element.

example

Simple Usage

const { elementProps, rendered } = useCollapseTransition({
  // ...options
  transitionIn,
});

if (!rendered) {
  return null
}

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

// This is the long-hand version
const { ref, style, className, hidden, rendered } = useCollapseTransition({
  // ...options
  transitionIn,
});

if (!rendered) {
  return null
}

return (
  <div
    ref={ref}
    style={style}
    className={className}
    hidden={hidden}
  >
    {children}
  </div>
);

hidden

hidden: boolean

This will be set to true when the element is fully collapsed and the CollapseTransitionHookOptions.temporary is set to false. This should be applied as the hidden attribute to a DOM node.

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}

style

style: CSSProperties

A merged styled object required for the collapse transition to work.

see

CollapseStyle

see

CollapseTransitionHookOptions.style

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