Trabajo con el paquete react-rnd para cambiar el tamaño de un objeto en una aplicación de reacción. Me pregunto si hay alguna manera de configurar la operación de cambio de tamaño.

Este es el componente en el que trabajo:

Cuando cambio el tamaño usando el borde derecho, la 'A' de 'VISA' se oculta y la posición del borde izquierdo permanece donde estaba.

Cuando cambio el tamaño desde el borde izquierdo, quiero que la 'V' se oculte y que la posición del borde derecho permanezca donde estaba. La posición permanece según lo previsto, pero 'A' se oculta en su lugar. En otras palabras , me gustaría cambiar x y el ancho al mismo tiempo, para mantener el borde derecho en la misma posición y ocultar la parte derecha del elemento cuando se cambia el tamaño del borde izquierdo.

¿Hay alguna manera de ocultar la 'V' mientras se mantiene el borde derecho en la misma posición, algo como a continuación?

Configuré el componente usando: https://www.npmjs.com/package/react-rnd

Configuraciones:

 const style = { display: 'flex', position: 'relative', border: 'solid 1px #ddd', overflow: 'hidden', }; const resizeDirections = { bottom: false, bottomLeft: false, bottomRight: false, left: true, right: true, top: false, topLeft: false, topRight: false, }

Componente:

 return ( <Rnd style={style} enableResizing={resizeDirections} children={<img id="visaImage" src={visa} alt=""></img>} default={{ x:0, y:0, width: 250, height: 60, }} /> )