Skip to content
This repository was archived by the owner on Nov 8, 2025. It is now read-only.

Allow boxClassName to be a function #2

Open
matthieutirelli-pro wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Allow boxClassName to be a function #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import React, { useState, useEffect, useRef, useCallback } from 'react'
import { largestRect } from 'rect-scaler'

type FunctionBoxClassNameType = (child: React.ReactNode) => string;
Copy link
Owner

@mxmul mxmul Mar 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we avoid passing around and introspecting React nodes like this? The pattern is discouraged / deprecated

Maybe instead, we only pass the index of the child?



interface Props {
children: React.ReactNode
className?: string
boxClassName?: string
boxClassName?: string | FunctionBoxClassNameType
Copy link
Owner

@mxmul mxmul Mar 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could just inline the FunctionBoxClassNameType here.

updateLayoutRef?: React.MutableRefObject<(() => void) | undefined>
boxAspectRatio?: number
}
Expand Down Expand Up @@ -72,7 +75,7 @@ export function PackedGrid({
className,
boxClassName,
updateLayoutRef,
boxAspectRatio
boxAspectRatio,
}: Props) {
const [layout, setNumBoxes, updateLayout] = usePackedGridLayout(
boxAspectRatio
Expand Down Expand Up @@ -105,7 +108,7 @@ export function PackedGrid({
>
{React.Children.map(children, (child) => (
<div
className={boxClassName}
className={typeof boxClassName === "function" ? boxClassName(child) : boxClassName}
style={
layout
? {
Expand Down