react-elastic-carousel dynamic itemsToShow depending screen size

user_1341373 0
Viewed 1579

I'm using react-elastic-carousel in vertical mode. Items in there have a fixed height. I would like the number of items to show to be dependend on the available space on the screen.

In my App.tsx:

<div className="App-body">
  <Carousel verticalMode itemsToShow={1}>
    {state.items.map((item, index) => <Item key={index}>{item.text}</Item>)}
  </Carousel>
</div>

https://sag1v.github.io/react-elastic-carousel/verticalMode

Item.tsx

import styled from 'styled-components';

export default styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  width: 100%;
  background-color: #683bb7;
  color: #fff;
  margin: 15px;
  font-size: 4vw;
`;

At this point I'm not sure how to handle this at all. Somehow the component has to get the height of its parent element, know how height the items will be and calculate a number that fits. Ofcourse this has to be done each time a screen is resized. Any ideas?

react-elastic-carousel carousel reactjs css javascript
1 Answers

Use breakPoints as Props in the Carousel Component:

 const breakPoints = [ 
   {width:1,itemsToShow:1},
   {width:500,itemsToShow:2},
   {width:768,itemsToShow:3},
   {width:1100,itemsToShow:4}
 ]
user_133462430
Related