Text gets deleted / cut off
- Dominant language
- JavaScript
- Stars
- 1.4k
- Forks
- 77
- PR merge metrics
- No merged PRs in 30d
Description
First of all, thanks for open sourcing this!
I'm not sure how, but text is being truncated / deleted from the DOM in my production build. The full text here is supposed to be "The link in bio that increases your conversions". Here is a video that demonstrates as the resize happens, content just straight up gets deleted.
https://user-images.githubusercontent.com/16343600/203141529-46ae3bd8-b68f-48fc-a475-26a00d2aa4cb.mov
Posting this mainly to try to understand **why** content is being straight up deleted.
### Reproduce Scenario (including but not limited to)
I can't reproduce locally, but it happens on my NextJS production build.
#### Steps to Reproduce
Can see it on this page [here](https://usedreamer.com/preview/67868056-17e2-40e5-9d8e-6fe3179aacb1).
Can't reproduce locally however.
#### Platform and Version
Using Next.js
#### Sample Code that illustrates the problem
This is how I'm using it in my NextJS app:
```
import balanceText from 'balance-text'
import React, { useEffect, useRef } from 'react'
export function CustomBalanceText({ children }: { children: React.ReactNode }) {
const spanRef = useRef(null)
useEffect(() => {
const handleResize = () => {
if (spanRef) {
balanceText(spanRef.current)
}
}
handleResize()
window.addEventListener('resize', handleResize)
return () => {
window.removeEventListener('resize', handleResize)
}
}, [spanRef])
return {children}
}
// And using it like:
{content}
```
#### Other Attempts
I've also tried using `react-balance-text` and using the CDN to the same result, leading me to believe there's an issue with this package. It's odd to me that no one has run into this before though, so might be a setup issue.
Contributor guide
Research direction
No repository file or test is named. Start with the balanceText entry point and the supplied CustomBalanceText resize handler, then reproduce the behavior on the linked page or in a Next.js production build; done means the full text remains in the DOM during resize.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nextjs, react
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100