sgwilym / windups Goto Github PK

Hi, is there a way to set the box size ahead of time, based on the full text? I'm struggling with lower elements on my page jumping around when the windup does a newline.

Rewind starts the loop over from the beginning, but what would be a good approach to backing up a few characters?

A use case would be emulating the backspace button for typed text.

windups type declaration file is not working

I'm trying to use windups with Astro in a component made with React but, I get this error from Astro.

Any ideas?

Hi, first of all. I love the package. It's soooo awesome.
Secondly, I would like to know if there is some way of giving the hole component like a default pace. The overall animation is too fast for my use case. And the possibility of allowing different paces would be a great addition to my project

Hello, thanks for this smart library.

I use windups in a NextJS application. So far using it has not been a problem, however NextJS has made changes whereby loading the library is no longer possible.

Note: In a simple NextJS application, loading windups is still possible. In a more complex setup, such as when using Yarn submodules, this is no longer possible.

The main issue is that windups does not provide CommonJS output. In the following pull request, besides the renewal of dependencies, a replacement of the build system (introduction by rollup) is aimed at just this. Besides the output in ES format CommonJS is supported. Of course, types are also generated for Typescript.

Maybe there is a willingness to include these changes in the main repository, otherwise I have to move on to my fork and a customized NPM deployment.

Thank you!

Great Job, this is the only library I've seen that allows animating react components and not just plain strings. But I'm using it on a terminal-like component, so I'm wondering if there's a way to add a cursor.

Thanks so much for your efforts.

Windups depends on break-styled-lines. This dependency does not provide a commonJS output. When the loading of windups starts as a commonJS module, the respective counterpart of break-styled-lines in a commonJS format is required. See #15 (comment)

From the guides:

Let me be clear: changing the value of a windup while it's running will restart it from scratch. At least... that's how it's meant to work.

I'd really like to change the styles of the text mid-windup (exactly as with the example in the guide), re-rendering the colour of the text but without restarting the windup. The specific animation is to type out some text, and then when it's finished it becomes bold and red (mimicking a phone PIN attempt fail)

I suppose that it would be best served as a prop into WindupChildren? It isn't clear to me immediately looking at the code, do you have any pointers into how I might implement it this? A priori the prop could cause the old position/index of the windup animation to be saved, and it would restart from here? Is this feature desirable? If I can do it I think it would be one of the little details which would make my animation better 🙂

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! I really like your library, it's super cute and I'm using it on my personal site.

I recently updated my site to use React 18, and I've been running into some issues with the typings however.
React 18 had some breaking changes with typings, namely that for React.FC<T>, they removed implicit children, meaning that you have to explicitly add the type for children in the prop type.

For example:

Type '{ children: Element[]; ms: number; }' is not assignable to type 'IntrinsicAttributes & PaceProps'.
  Property 'children' does not exist on type 'IntrinsicAttributes & PaceProps'.

I'm pretty sure it would be enough to either wrap the prop type with React.PropsWithChildren, like this

const Pace: React.FC<React.PropsWithChildren<PaceProps>> = ({ children }) => {
  return <>{children}</>;
};

or add it to the type like this

type WindupChildrenProps = {
  children: React.ReactNode;
  onFinished?: () => void;
  skipped?: boolean;
};

Hello! Me again 😅

I was wondering if there's a story behind your use of 'ms' in props over in Pace.tsx.

Specifically, I'm trying to add a "hold button to speed up"-style UX to my windup, and when in this mode would like to use a pace of 4ms per character; meanwhile when I'm not in this mode I'm hoping to use the defaultGetPace implementation. Intended usage looks something like:

<windups.WindupChildren>
  <windups.Pace ms={isInFastMode ? 4 : null} getPace={windups.defaultGetPace}>
    this is a lot of text that a user might fast-mode through
  </windups.Pace>
</windups.WindupChildren>

Is this another contrib I can help with?

It would be great if you could start with an initial string and "windup" by replacing characters instead of starting with an empty string.

E.g. Replacing the English word "Christmas" to Spanish "Navidad"

Initial render:
Christmas
First character replacement:
Nhristmas
Second character replacement:
Naristmas
Etc...
Navistmas
Navistmas
Navidtmas

It would also be cool if you could animate the "rest" of the characters that haven't been replaced yet e.g. by lowering the opacity or something. My specific use case is for animating a translation like above.

Hi,

First of all, your library is awesome !

I love the doc site, and I would love to be able to look at the source code of the doc website to learn in a real world example project :)

I understand if you don't want it to be public tho !

Hello! It seems like the new version 1.1.7 creates some issues and the module can't be located anymore. It seems to have something to do with: https://github.com/sgwilym/windups/blob/master/package.json#L28

There's no file called index-.js. Possibly a mistake in the new build system?

when i install and update the package tell me,Could not find a declaration file for module 'windups'. 'c:/NextJSProjects/uravatar-studio-project/node_modules/windups/dist/windups.esm.js' implicitly has an 'any' type.
There are types at 'c:/NextJSProjects/uravatar-studio-project/node_modules/windups/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'windups' library may need to update its package.json or typings.ts(7016)

Apologies if I've missed something in the docs

I've had a persistent error message for the last few hours:

Warning: Each child in a list should have a unique "key" prop.
Check the render method of `WindupChildren`. See https://fb.me/react-warning-keys for more information.

my component is rendered like so:

<Container>
    <VisuallyHidden><ul className={styles.messageFeed}>{messagesUnread}</ul></VisuallyHidden>
    <div aria-hidden>
        <WindupChildren>
            <ul className={styles.messageFeed}>{messagesUnread}</ul>
        </WindupChildren>
    </div>
</Container>

each message in the list is rendered with a unique key as requested in the React docs

<Message message={message} key={message.id}/>

In debugging I found that WindupChildren is the cause of the issue (it's fine that the list is included under VisuallyHidden as well). I tested without the WindupChildren to confirm I've not done something wrong with the key

Love the library by the way, the project is a sort of text-based adenture game and windups really helps the UI come alive