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.
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,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.
