Question about scaleToFit behavior

Hello! I was hoping to use the scaleToFit option on Text to shrink the font-size of a number if it was longer than the space available to display it. Unfortunately, it appears that the behavior of scaleToFit scales the size of the text up as well.

Is there an existing workaround to do what I need via Text (only shrink the size if it is too long)? If not, would you be open to a PR that adds this option?

Though, I am not certain the best way to add it. Adding a second prop seems somewhat clunky. Updating the existing prop to have shrink-only (or something similar) would be more ergonomic, but might be awkward to do in a backward-compatible way.

[kyythane]

If I get time, I’ll make an update to the demo later today. I guess the easiest change would be replacing the checkbox with a dropdown.

[williaster]

Hey @kyythane 👋 thanks for checking out visx. I can’t think of a workaround for this at the moment, it’s not exposed in Text but you might be able to leverage the useText hook directly. It might still be a little bit tricky since this is implemented with a transform, so a PR might be the best way to add it cleanly.

I’m definitely happy to review a PR! modifying shrinkToFit: boolean to something like shrinkToFit: boolean | 'shrink-only' seems like it could be a good approach to me 👍 I agree keeping a single prop sounds good and I don’t think it’d be breaking 💥 since it would still accept true/false.