sgwilym/windups

Feature request

nathanlucaussy opened this issue · 1 comments

This is a great library!
Two small things that I think could be nice to add (apologies if any of these are already possible):

  • when typing text that is centrally aligned, it would be nice if the characters were placed in their final positions, rather than shifting the currently-typing line of text each time a character is typed.
  • calculate and fix dimensions of text flowing so that the container holding the text does not need to resize each time characters are typed.

Hi @nathanlucaussy! I'm glad that you like it. Regarding your suggestions:

when typing text that is centrally aligned, it would be nice if the characters were placed in their final positions, rather than shifting the currently-typing line of text each time a character is typed.

This library has absolutely no way of knowing what will be rendered. It also doesn't have any say over how things are rendered, only if they are rendered.

I can think of a way to do what you want to do if you only need a string, though:

useFixedPositionWindup(str) {
  const [windup, { isFinished }] = useWindup(str);
  
  // Create a second copy of the string which has as many characters taken off the beginning as the windup has
  // e.g. in the case of "hello", 
  // windup = "hel"
  // invisible = "lo"
  const invisible = endString.slice(windup.length);
  
  // If the windup is finished, show the endstring no matter what
  return (
    <>
      <span>{windup}</span>
      </span style={{ opacity: 0 }}>{invisible}</span>
    </>
  )
}

// Use it!
const windup = useFixedPositionWindup("The characters here should remain in place, even when centred.")

calculate and fix dimensions of text flowing so that the container holding the text does not need to resize each time characters are typed.

I recommend you render a plain copy of whatever it is you're making into a windup into the same container your windup is being rendered into. Make it invisible using opacity, and use positioning to make it render in the same place the windup will. (I realise that may sound a bit confusing...)