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

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: undefined | string

The current transition class name or undefined.

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: (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: 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.

{@inheritDoc TransitionStage}

Methods

  • 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