Conversation
The animate function was recreated every render and used as a useEffect dependency, causing the effect to re-fire on every render. This constantly cancelled and re-requested animation frames. Fix: use a frameRef pattern where the rAF loop always calls through a ref that holds the latest closure. This eliminates the [animate] dependency and consolidates three separate useEffects into one clean effect that only re-runs when text changes. Speed and other prop changes are picked up automatically via the fresh closure in frameRef.current. Made-with: Cursor
- Replace useRef<any> with useRef<HTMLElement> for DOM node ref - Replace Function type with () => void for callback props - Simplify RangeOrCharCodes type to [number, number] | number[] - Fix duplicate number in setIfNotIgnored value param type - Replace all var declarations in for loops with let Made-with: Cursor
- Replace innerHTML with textContent for DOM updates. The output is always plain text so textContent is both safer (no XSS) and faster (no HTML parsing). - Cache prefersReducedMotion in state and subscribe to media query changes via addEventListener, so the hook reacts dynamically when the user toggles their OS reduced-motion preference. Made-with: Cursor
TSDX has been unmaintained since 2021 and pins old versions of Rollup, Jest, and TypeScript. - Replace tsdx with tsup (esbuild-based, outputs CJS + ESM + DTS) - Replace tsdx test with vitest as the test runner - Add tsup.config.ts and vitest.config.ts - Update package.json scripts, output paths, and size-limit paths - Update playground import from dist to src for dev workflow - Install @testing-library/react + @testing-library/dom for future tests Made-with: Cursor
- TypeScript 4.9.3 -> 5.9.3 - @types/react 18.0.26 -> 19.x - @types/react-dom 18.0.9 -> 19.x - size-limit 4.8.0 -> 11.x - @size-limit/preset-small-lib 4.8.0 -> 11.x - concurrently 7.6.0 -> 9.x - Remove tslib (no longer needed with tsup) Made-with: Cursor
- Bump version to 3.0.0 - Add exports field with proper CJS/ESM type resolution - Add sideEffects: false for tree-shaking - Update engines to node >= 18 - Update peerDependencies to react/react-dom >= 17 (drop React 16) - Update tsconfig: remove stale types include, use react-jsx transform, add dom.iterable lib, set es2018 target Made-with: Cursor
useScramble now accepts a generic type parameter for the DOM ref:
const { ref } = useScramble<HTMLParagraphElement>({ text: "hello" })
Defaults to HTMLElement for backwards compatibility.
Made-with: Cursor
New optional `delay` prop (milliseconds) to postpone the animation start. Applies to both initial mount animation and manual replay(). Defaults to 0 (no delay) for backwards compatibility. Timers are properly cleaned up on unmount and text changes. Made-with: Cursor
New optional `direction` prop controls the order characters resolve: - 'ltr' (default): left to right, same as previous behavior - 'rtl': right to left, characters resolve from end to start - 'random': characters resolve in a shuffled random order Internally, a resolveOrderRef maps the cursor position to actual character indices, and enteredRef tracks which positions have been entered. This replaces the old position-based comparisons in draw(), seedForward(), stepForward(), and onOverdrive(). Made-with: Cursor
Replace the no-op placeholder test with 11 meaningful tests: - renders without crashing - resolves to target text - fires onAnimationEnd / onAnimationStart callbacks - playOnMount: false shows text immediately - speed: 0 pauses animation - fires onAnimationFrame during animation - replay restarts animation - handles empty text - handles text change (rerender) - respects ignore characters Also adds test/setup.ts to mock window.matchMedia for jsdom. Made-with: Cursor
Run on push to main/v3 and on PRs to main: - Type check (tsc --noEmit) - Test (vitest) - Build (tsup) - Size limit check Tests across Node 18, 20, and 22. Made-with: Cursor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.