To help you get started, we've collected the most common ways that @react-md/transition is being used within popular public projects.

mlaursen / react-md / packages / autocomplete / src / useAutoComplete.ts View on Github

});

  useCloseOnOutsideClick({
    enabled: visible,
    element: inputRef.current,
    onOutsideClick: hide,
  });

  const {
    style,
    onEnter,
    onEntering,
    onEntered,
    onExited,
    updateStyle,
  } = useFixedPositioning({
    fixedTo: () => inputRef.current,
    anchor,
    onScroll(_event, { visible }) {
      if (!disableHideOnScroll || !visible) {
        hide();
      }
    },
    onResize: disableHideOnResize ? undefined : hide,
    width: listboxWidth,
    xMargin,
    yMargin,
    vwMargin,
    vhMargin,
    transformOrigin,
    preventOverlap,
    disableSwapping,

View more ways to use @react-md/transition

@react-md/transition

Create simple CSS transitions using the provided transition hooks and components utilizing the default transition timing functions. This package also provides a collapse transition, scaling transition, vertical only scaling transition, and a new page transition named cross fade.

Provided components and hooks:

• Collapse or useCollapseTransition - transition an element in and out of view based on the height of the element
• CrossFade or useCrossFadeTransition - a transition generally used for a full page transition that fades and slightly moves a child component into view
• ScaleTransition or useScaleTransition - transition an element in and out of view with a scale transform that can be updated to just be scaleY
• useTransition - a hook implementation of the Transition component from react-transition-group
• CSSTransition or useCSSTransition - allows for a CSS transition that was heavily inspired by react-transition-group
• useFixedPositioning - hooks into the CSSTransition component from to fix an element to another element within the viewport

The rmd-transition-shadow-transition mixin allows you to "performantly" transition between two box shadow values using the opacity trick. This mixin automatically creates a pseudo ::before or ::after element with the final box shadow and animates the opacity once one of the $active-selectors are triggered. The code below will help explain this part a bit more.

Installation

npm install --save @react-md/transition

It is also recommended to install the following packages as they work hand-in-hand with this package:

npm install --save @react-md/theme \
  @react-md/utils

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

import type { useState } from "react";
import { render } from "react-dom";
import { Button } from "@react-md/button";
import { Collapse } from "@react-md/transition";

const App = () => {
  const [collapsed, setCollapsed] = useState(true);

  return (
    <>
      <button> setCollapsed(!collapsed)}&gt;Toggle</button>
      
        <div>This is my collapsible content!</div>
      
    
  );
};

render(, document.getElementById("root"));