Placeholder width doesn't take `fontSize` into account

[inje]

User Story

I tried adding a fontSize to the style and className properties but they don't update the width of the transition text.

In the screenshot below, the large text overlaps other elements because the width is not updated from the given styles.

Solution

Adding the same fontSize to the .placeholder span fixes the issue, since the transition text grabs its width from the placeholder text when the inline prop is true.

https://github.com/WinterCore/react-text-transition/blob/master/src/components/TextTransition.js#L50

To Reproduce

With style

<TextTransition
  inline
  overflow
  style={{ fontSize: '86px', }}
  text="Foo Bar"
/>

With className

/**
 * styles.css
 */
.transition-text {
  font-size: 86px;
}

/**
 * index.jsx
 */
<TextTransition
  className="transition-text"
  inline
  overflow
  text="Foo Bar"
/>

[WinterCore]

Hi and sorry for being late Are you sure there's nothing else conflicting with the styles of any of the elements of this plugin ? I wasn't able to reproduce this issue. I might be doing something wrong. Could you try to reproduce it in a Codesandbox example and sending me the link. You could also fork the repo and use the demo to do that. Thanks in advance

[inje]

That's interesting. I'm not seeing it in CodeSandBox: https://codesandbox.io/s/jvj629pzw9

Might be something on my end. Let me dig in deeper to verify.

[WinterCore]

Closing this issue due to inactivity