Add "+5" if there is no space for more elements - html

Question

I have a div (ItemsContainer) that has an array of items (Item) being rendered inside of it. The div has a dynamic size, depending on the size of the screen.
As I'm mapping through the array, I'd like to be able to make a check to see if there is enough space to render the current item. If there isn't, I'd like to stop rendering the items and instead add another item that says "+(number of items not rendered in array)". See the included picture for reference.
So far, this is what my code looks like. I'm using React typescript. I haven't attempted adding the "+5" box yet, because I'm wondering if it's actually possible? My initial thought is to just have a fixed number of items be displayed and then display the + item if there are more items not rendered, but I was hoping you could do it a bit more dynamic.
const Items: FC<Props> = ({ items }) => {
return (
<ItemsContainer>
{items.map((item, index) => (
<Item key={index}>{item.name}</Item>
))}
</ItemsContainer>
);
};

Answer 1

Here is a partially working solution: https://codepen.io/Latcarf/pen/WNKZmBN.
The main part of the code is the following:
const Tags = ({tags}) => {
const [hiddenCount, setHiddenCount] = React.useState(0)
const shownTags = hiddenCount == 0 ? tags : tags.slice(0, -hiddenCount);
const ref = React.useRef();
React.useLayoutEffect(() => {
if (!ref.current) {
return;
}
if (ref.current.scrollWidth > ref.current.clientWidth) {
setHiddenCount(count => count + 1);
}
});
return (
<div class="container" ref={ref}>
{shownTags.map(tag => <div class="tag">{tag}</div>)}
{hiddenCount > 0 && <div class="tag">{`+${hiddenCount}`}</div>}
</div>
)
};
The idea is to keep a hiddenCount state variable that contains the number of hidden tags. It starts at 0, and then a layout effect checks whether there is space and keeps incrementing it until there is enough space. It's a bit inefficient if you have many hidden items, as it will rerender many times until it reaches the correct amount, but it should properly deal with edge cases like if adding +1 would actually be longer than displaying the last tag, or stuff like that.
In order to make it update automatically on resize, you would use some kind of useResizeObserver hook to reset hiddenCount to 0 after a resize. Somehow I couldn’t manage to import other packages in CodePen, so I just made a button that forces a rerender so that you can test it (resize the div and then click the button).