sgwilym / windups Goto Github PK
View Code? Open in Web Editor NEWA unique typewriter effect library for React.
Home Page: https://windups.gwil.co
License: MIT License
A unique typewriter effect library for React.
Home Page: https://windups.gwil.co
License: MIT License
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
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):
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:
N
hristmas
Second character replacement:
Na
ristmas
Etc...
Nav
istmas
Navi
stmas
Navid
tmas
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.