react-packed-grid icon indicating copy to clipboard operation
react-packed-grid copied to clipboard

Allow boxClassName to be a function

Open matthieutirelli-pro opened this issue 3 years ago • 1 comments

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 avatar Mar 10 '22 11:03 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 :)

matthieutirelli-pro avatar Mar 10 '22 11:03 matthieutirelli-pro