Skip to main content

Animations

I also packed a couple of animations inside the component. They are accessible through the animated prop.

The animated prop​

This prop accepts either a boolean value or an object with the following structure

{
    animation?: "zoom" | "fade" | "slideLeft" | "slideRight" | "slideDown" | "slideUp"
    duration?: React.CSSProperties['animationDuration'] //Es. "2s", "200ms", "0.2s", ...
}

The default animated value is true, which in turn defaults to

{
    animation: "zoom",
    duration: "0.2s"
}

Example​

const animation = {
  animation: "fade",
  duration: "1s",
};
return (
  <ContextMenu items={items} animated={animation}>
    <ChildComponent />
  </ContextMenu>
);
Right click here!

These are the available animations​

zoom
fade
slideLeft
slideRight
slideDown
slideUp