How to use @react-md/transition - 2 common examples

To help you get started, we’ve selected a few @react-md/transition examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mlaursen / react-md / packages / autocomplete / src / useAutoComplete.ts View on Github external
});

  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,
github mlaursen / react-md / packages / examples / src / SheetDemo.tsx View on Github external
let verticalPosition: VerticalPosition | undefined;
  switch (position) {
    case "left":
      horizontalPosition = "inner left";
      break;
    case "right":
      horizontalPosition = "inner right";
      break;
    case "top":
      verticalPosition = "above";
      break;
    case "bottom":
      verticalPosition = "below";
      break;
  }
  const styleProps = useRelativePositioningStyle({
    fixedTo: ref.current,
    horizontalPosition,
    verticalPosition,
  });

  const show = (position: SheetPosition, first: boolean = true) => (
    event:
      | React.KeyboardEvent
      | React.MouseEvent
  ) => {
    ref.current = event.currentTarget;
    setPosition(position);
    setVisible(true);
    setFocusfirst(first);
  };

@react-md/transition

A package for working with react-md to use some simple transitions.

MIT
Latest version published 4 months ago

Package Health Score

70 / 100
Full package analysis