While working at Hootsuite, I’ve had the pleasure of working in-depth with React to build our newest features for the dashboard. For example, I was tasked with building a component to show a horizontal list of items that adapted to the changing window size. Based on the window width, my component would show a dynamic amount of items and tell the user how many of those items were hidden if any. It’d be a fairly simple task if the amount of items was static, but but since the number of items is dynamic, I had to calculate how many to display each time the window size changed.

More specifically, the amount of items in the list should change depending on the size of the container. The last item in the list should show how many hidden items there are in the list if all the items didn’t fit (i.e +3).

For example:

  • 6 items
  • Can only fit 4
  • (item) (item) (item) (+3)
Read More …