adds mouseenter and mouseleave

[jaredshaunsmith]

We found a usecase at VSCO to need to know when a mouseEnter and mouseLeave event fires in over the crop selection box. This PR addresses that by adding them to the spec.

Would love to see this get merged and will actively respond and update if there's any feedback.

Thanks!

[sekoyo]

Rather than add these props (and the list of possible attributes it can take are lengthy), how about using renderSelectionAddon={(state: CropState) => <CropAddon />}?

import { useState } from 'react'

/*
.crop-addon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
*/
import './CropAddon.css'

export function CropAddon() {
  const [overState, setOverState] = useState(false)

  return (
    <div
      className="crop-addon"
      onPointerEnter={() => setOverState(true)}
      onPointerLeave={() => setOverState(false)}
    >
      <h1>{overState ? 'Pointer Over' : 'Pointer Left'}</h1>
    </div>
  )
}

Demo: https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-renderselectionaddon-xtqs6k

[jaredshaunsmith]

Seems a bit like a hammer for a screwdriver's job imho. Given that react / html handles mouse events like this natively we'd rather not implement this this way.

Totally hear your concern on bloating the props list with adding too many but I feel these are table stakes.