Breaking News: Grepper is joining You.com. Read the official announcement!

React mui custom transition component

Blushing Buffalo answered on July 2, 2023 Popularity 8/10 Helpfulness 2/10

answer React mui custom transition component

React mui custom transition component

Comment

import PropTypes, { ReactNode } from 'prop-types';
import { forwardRef, ReactElement, Ref } from 'react';

// material-ui
import { Collapse, Fade, Box, Grow, Slide, Zoom } from '@mui/material';

interface TransitionsProps {
  children: ReactNode;
  type: 'grow' | 'fade' | 'collapse' | 'slide' | 'zoom';
  position: 'top-left' | 'top-right' | 'top' | 'bottom-left' | 'bottom-right' | 'bottom';
  direction: 'up' | 'down' | 'left' | 'right';
}

const Transitions = forwardRef(function Transitions(
  { children, type, position, direction, ...others }: TransitionsProps,
  ref: Ref<any>
): ReactElement {
  let positionSX = {
    transformOrigin: '0 0 0'
  };

  switch (position) {
    case 'top-right':
      positionSX = {
        transformOrigin: 'top right'
      };
      break;
    case 'top':
      positionSX = {
        transformOrigin: 'top'
      };
      break;
    case 'bottom-left':
      positionSX = {
        transformOrigin: 'bottom left'
      };
      break;
    case 'bottom-right':
      positionSX = {
        transformOrigin: 'bottom right'
      };
      break;
    case 'bottom':
      positionSX = {
        transformOrigin: 'bottom'
      };
      break;
    case 'top-left':
    default:
      positionSX = {
        transformOrigin: '0 0 0'
      };
      break;
  }

  return (
    <Box ref={ref}>
      {type === 'grow' && (
        <Grow {...others}>
          <Box sx={positionSX}>{children}</Box>
        </Grow>
      )}
      {type === 'collapse' && (
        <Collapse {...others} sx={positionSX}>
          {children}
        </Collapse>
      )}
      {type === 'fade' && (
        <Fade
          {...others}
          timeout={{
            appear: 500,
            enter: 600,
            exit: 400
          }}
        >
          <Box sx={positionSX}>{children}</Box>
        </Fade>
      )}
      {type === 'slide' && (
        <Slide
          {...others}
          timeout={{
            appear: 0,
            enter: 400,
            exit: 200
          }}
          direction={direction}
        >
          <Box sx={positionSX}>{children}</Box>
        </Slide>
      )}
      {type === 'zoom' && (
        <Zoom {...others}>
          <Box sx={positionSX}>{children}</Box>
        </Zoom>
      )}
    </Box>
  );
});

Transitions.propTypes = {
  children: PropTypes.node,
  type: PropTypes.oneOf(['grow', 'fade', 'collapse', 'slide', 'zoom']),
  position: PropTypes.oneOf(['top-left', 'top-right', 'top', 'bottom-left', 'bottom-right', 'bottom']),
  direction: PropTypes.oneOf(['up', 'down', 'left', 'right'])
};

Transitions.defaultProps = {
  type: 'grow',
  position: 'top-left',
  direction: 'up'
};

export default Transitions;

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: chat.openai.com

Tags: custom-transition javascript react-mui

Link to this answer
Share Copy Link

Contributed on Jul 02 2023

Blushing Buffalo

0 Answers Avg Quality 2/10

React mui custom transition component

Contents

More Related Answers

React mui custom transition component

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.