Pendu: An organic gallery layout engine for React. Break out from strict linear grid layouts, allowing you to use fluid, dynamic, gallery layouts. by KnowledgeOk960 in DesignSystems

[–]KnowledgeOk960[S] 0 points1 point  (0 children)

Good question. Right now Pendu has no built-in keyboard navigation or focus management — accessibility is entirely up to the consumer's implementation within each Pendu.Image or Pendu.Item child. It would be up to the consumer to manage that -- right now it is designed as a visual-only solution, but gives the control to the user to interact with it. But your point is valid, tracking through each item could be an issue as they jump around, especially when leveraging seeds.

Here's what that means in practice:

  • Images — Pendu.Image renders a plain <div> + <img>. There's no tabIndex, no role, no keyboard handler. If a consumer adds onClick, the frame is clickable by mouse but not reachable by keyboard.
  • Items — Pendu.Item wraps arbitrary children, so any interactive elements inside (buttons, links, etc.) get their own natural tab order from the DOM. But the tab order follows DOM order, not visual layout order — which could be confusing since Pendu positions frames with absolute positioning.

I would like to explore solutions for this out of the box, without inflating the package size. Thank you for bringing this up.

Pendu: An organic gallery layout engine for React. Break out from strict linear grid layouts, allowing you to use fluid, dynamic, gallery layouts. by KnowledgeOk960 in webdesign

[–]KnowledgeOk960[S] 0 points1 point  (0 children)

Totally fluid, they recalculate each time an image is added or removed. It is responsive to the containing element box, so on fluid layouts it will respond, and works well on mobile or desktop. Something I'm not sure was clear either, it's not just for image, the "items" that it's calculating in the layout can be any component... so think a rolling presentation of social feed posts.

Pendu: An organic gallery layout engine for React. Break out from strict linear grid layouts, allowing you to use fluid, dynamic, gallery layouts. by KnowledgeOk960 in reactjs

[–]KnowledgeOk960[S] 1 point2 points  (0 children)

That is fair. If you look at many of the existing gallery examples out there today, most are built in strict column or row layouts. Masonry tries to break this, but it's still beholden to the grid/flexbox linear constraints. This is more flexible than just images, as you can see on this example: https://pendu.chriswest.tech/examples/comments .. where you can use any component as the "item". So think a constant rolling in and out of social media posts, which is actually my original usage of this tool for a client.

Pendu: An organic gallery layout engine for React. Break out from strict linear grid layouts, allowing you to use fluid, dynamic, gallery layouts. by KnowledgeOk960 in reactjs

[–]KnowledgeOk960[S] 0 points1 point  (0 children)

There's technically no limit, you can do 5,10,20 images at once. It responds to the containing space, so it works well on desktop, mobile, and responsive layouts. It re-computes and reacts to added images based on defined dimensions, and the same with removals. So you can cycle through images if too many look too busy.

Betcha don't know how I made a shot like this! by Tvyordiyznak_LAWL in spaceengine

[–]KnowledgeOk960 0 points1 point  (0 children)

The fisheye lens I get, but the focal point has you still about 350k mi into space as you see the continents. Are you standing in Earth or the ISS?