Function Hover

stories/demos/Hover.js:13–32

()

const ARROW_DELAY = 125;

function Hover() {
  const [play, { stop }] = useSound(popsSfx, { volume: 0.5 });

  const [isHovering, setIsHovering] = React.useState(false);

  return (
    <Button
      onMouseEnter={() => {
        setIsHovering(true);
        play();
      }}
      onMouseLeave={() => {
        setIsHovering(false);
        stop();
      }}
    >
      <ButtonContents isHovering={isHovering}>Hover over me!</ButtonContents>
    </Button>
  );
}

const ButtonContents = ({ isHovering, children }) => {
  return (