Skip to content

feat(react): add Waterfall masonry layout component#64

Merged
wangdicoder merged 1 commit intomasterfrom
feat/waterfall-component
Mar 21, 2026
Merged

feat(react): add Waterfall masonry layout component#64
wangdicoder merged 1 commit intomasterfrom
feat/waterfall-component

Conversation

@wangdicoder
Copy link
Owner

Summary

  • Add new Waterfall masonry layout component to @tiny-design/react
  • Supports fixed or responsive column count (columns prop with breakpoint config)
  • Configurable gutter spacing (number or [horizontal, vertical])
  • Data-driven rendering via items + itemRender, with support for direct children content
  • Items can be pinned to specific columns via column prop
  • Dynamic add/remove with fade-out exit animation and smooth repositioning
  • onLayoutChange callback for persisting column assignments
  • Auto-measures item heights via ResizeObserver, handles image load/error
  • 4 demos: Basic, Responsive (interactive slider), Image Gallery, Dynamic add/remove
  • English and Chinese documentation
  • 6 unit tests

Release

  • Bump type: minor
  • Affected packages: @tiny-design/react (fixed group bumps all packages)

Test plan

  • pnpm --filter @tiny-design/react test -- --testPathPattern waterfall — 6 tests pass
  • pnpm build — all packages build successfully
  • pnpm dev → navigate to /components/waterfall to verify all 4 demos render correctly
  • Verify responsive columns by resizing browser window
  • Verify dynamic add/remove with animations

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@wangdicoder wangdicoder merged commit 788f763 into master Mar 21, 2026
1 check passed
@github-actions github-actions bot mentioned this pull request Mar 21, 2026
@wangdicoder wangdicoder deleted the feat/waterfall-component branch March 22, 2026 10:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant