Visx: Text Component add break-word; option

[asteroidice]

Currently the @vx/text component doesn't support a breaking text that doesn't contain a space. An option that functions similarly to CSS' overflow-wrap: break-word; would be very helpful. Alternatively, exposing the regex used to select whitespace would help my specific use case.

Please let me know if this is something that is reasonable and let me know if you need anything else.

[williaster]

Hi @asteroidice 👋 thanks for checking out vx!

I agree that this would be a useful feature. We're focusing on some docs improvements and a v1 release so likely will not have bandwidth to add this for several weeks. I'm very happy to review a PR if you / others want to take a shot at it!

cc @techniq

[dennisja]

@asteroidice Do you still need this? I can make a PR to expose the regex

[asteroidice]

No thanks, I found a decent work around. I ended up injecting thin space next to the character where I wanted it to break. Thin spaces are considered white space so the text component will break them.

const str = "my_super_long_string_that_I_want_to_have_broken_into_multiple_lines";
str.replace(/_/g, '\u2009_');

Output (which breaks at underlines): my _super _long _string _that _I _want _to _have _broken _into _multiple _lines

It's not the best 🤷‍♂️

I would enjoy opening a PR, however my employer requires a lengthy painful process for this kind of thing. We're working on fixing that though