CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
mariadev
mariadev

Reputation: 87

How can I pass a transition MUI prop to my child component in React?

I have one parent component with a button. when I click it, it opens a snackBar from MUI (child component). My teacher told me to add a transition effect to the onClick so when I show the snackbar, it has a slide transition. I've tried to adjust MUI slide transition code from here MUI transition but I don't know how to pass the prop to the child component, I get an error in TransitionComponent={transition}. Any suggestion to make this working?

Parent component:

//NOTE: transition
type TransitionProps = Omit<SlideProps, 'direction'>;
const TransitionLeft = (props: TransitionProps) => <Slide {...props} direction="left" />


export const Messages = () => {

  const [msgStatus, setMsgStatus] = useState("");     
  
  //NOTE: transition
  const [transition, setTransition] = useState<React.ComponentType<TransitionProps> | undefined>(undefined);

  const handleClick = (Transition: React.ComponentType<TransitionProps>) => () => {
    setTransition(() => Transition);
    setMsgStatus('info');
  };

  return (
    <Stack>
       <Button
             onClick={handleClick(TransitionLeft)}
           >
             open info
           </Button>
           <InfoMessage
             open={msgStatus === 'info'}
             transition={transition}
             onClose={() => setMsgStatus('')}
           />
    </Stack>
  )
}

child component

interface InfoMessageProps {
  open: boolean;
  onClose: () => void;
  transition: React.ElementType;
}

export const InfoMessage = ({ open, onClose, transition }: InfoMessageProps) => {

  const handleClose = (): void => {
    onClose();
  };

  return (
    <Snackbar
      open={open}
      autoHideDuration={4000}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      onClose={handleClose}
      TransitionComponent={transition} // here I have an error
    >
      <Alert
        sx={{
              width: '487px',
              height: '104px',
              paddingTop: '20px',
              paddingLeft: '20px',
              backgroundColor: '#FDFDFD',
        }}
        icon={false}
        action={(
          <IconButton
            aria-label="close"
            color="inherit"
            size="small"
          >
            <CloseIcon style={{ fontSize:'24px' }} />
          </IconButton>
        )}
        onClose={handleClose}
      >
        <AlertTitle sx={{ paddingRight:'80px' }}>
          <Typography variant='headings.h4'>title</Typography>
        </AlertTitle>
        <Typography variant='captions.default'>Insert message here</Typography>
      </Alert>
    </Snackbar>
  );
};

Upvotes: 0

Views: 719

Answers (1)

stasdes
stasdes

Reputation: 669

you don't need to pass the transition, once the Snackbar is mounted (open={true}) the transtion will work

if you want slide transition just define it:

import Slide, { SlideProps } from '@mui/material/Slide';

function SlideTransition(props: SlideProps) {
  return <Slide {...props} direction="up" />;
}

and then render pass it to Snackbar as TransitionComponent:

<Snackbar
   open={state.open}
   onClose={handleClose}
   TransitionComponent={SlideTransition}
   message="I love snacks"
   key={state.Transition.name}
/>

Upvotes: 1

Related Questions