@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
40 lines • 1.04 kB
JavaScript
import { AnimatePresence } from 'motion/react';
import React, { useMemo } from 'react';
import { StyledMotionExpandableContent } from './ExpandableContent.styles';
const ExpandableContent = ({
children,
isOpen,
startDelay
}) => useMemo(() => {
const variants = {
open: {
height: 'auto',
overflow: 'hidden',
transition: {
duration: 0.2,
type: 'tween',
delay: startDelay
},
transitionEnd: {
overflow: 'visible'
}
},
closed: {
height: '0px',
overflow: 'hidden',
transition: {
duration: 0.2,
type: 'tween'
}
}
};
return /*#__PURE__*/React.createElement(AnimatePresence, {
initial: false
}, /*#__PURE__*/React.createElement(StyledMotionExpandableContent, {
animate: isOpen ? 'open' : 'closed',
variants: variants
}, children));
}, [children, isOpen, startDelay]);
ExpandableContent.displayName = 'ExpandableContent';
export default ExpandableContent;
//# sourceMappingURL=ExpandableContent.js.map