import React, { Fragment } from 'react';
import { useTransition } from 'react-spring';
//trigger: boolean, Comp: any, custom: any
const Zoom = function({ trigger, Comp, custom }: { trigger: boolean; Comp: React.FC<any>; custom: object }) {
    const transition = useTransition(trigger, null, {
        from: { scale: 0 },
        enter: { scale: 1 },
        leave: { scale: 0 },
        config: {
            tension: 2000,
            clamp: true,
        },
    });
    return (
        <Fragment>
            {transition.map(
                ({ item, key, props }: any) =>
                    item && (
                        <Comp
                            {...custom}
                            key={key}
                            style={{ transform: props.scale.interpolate((s: number) => `scale(${s})`) }}
                        />
                    )
            )}
        </Fragment>
    );
};
Zoom.defaultProps = {};
export default Zoom;