Do not scale child elements

[hellozyemlya]

Is that possible to skip scaling for child elements? I have some kind of map, and I don't want to scale icons or text on it.

Thanks.

[josip-volarevic]

Hello @hellozyemlya ser 👋

I have the same issue (map element with some text/buttons over it). Did you maybe find a solution or alternative library to this one? Save me... 🤣

[drumwithrum]

@Volki312 @hellozyemlya Hi! You can always use CSS transform property:

{({ state: { scale }, ...transformProps }) => (
       <TransformComponent>
          <div className="content">
            <img src={notScalableIconSrc} className="not-scalable-image" style={{ transform: `scale(${1 / scale})`  }} />
            <img src={scalableMapSrc} className="scalable-image" />
          </div>
        </TransformComponent>
 )}

Using scale this way it will always invert the parent's scale and stay the same size

[josip-volarevic]

@drumwithrum ah, makes so much sense...

Thanks a lot ser. Here, have this in return ༼ つ ◕_◕ ༽つ🍌

[prc5]

Added KeepScale component 🚀