Allow boxClassName to be a function

[matthieutirelli-pro]

Hello !
Thanks for your project that we really appreciate.
We faced an issue on our project, we want to have a grid with items taking specific classes ( on our case, to hide them without destroying the children from our list )
I changed the code for the boxClassName to allow a function that use the children as argument to determine the classes to apply to the Grid Item.

On our case we use it that way for instance :

 const getBoxClassName = (children) => {
    const { streamId } = children.props;
    return clsx({
      ["hide"]: lastTalkerStreamId !== streamId,
    });
  };


      <PackedGrid
        className={clsx("packedGrid", classes.packedGrid)}
        boxAspectRatio={16 / 9}
        updateLayoutRef={packedGridRef}
        boxClassName={getBoxClassName}
      >

[matthieutirelli-pro]

I'm not very used to Typescript, so i'm not really sure for the syntax of the interface, i hope this could contribute to your project :)

[mxmul]

Thanks for the PR! There's one small nit I'd like addressed, but the problem makes sense and it's something I'd like to see solved.

[mxmul]

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?

[mxmul]

You could just inline the FunctionBoxClassNameType here.