Full height carousel

I had to create a carousel that takes 100% space both vertically and horizontally. Here’s the wrapper I came up with:

import React from 'react';
import { CarouselProvider } from 'pure-react-carousel';
import PropTypes from 'prop-types';

class FullContainerCarouselProvider extends React.Component {
  static propTypes = {
    children: PropTypes.node.isRequired
  };

  constructor() {
    super();
    this.nodeRef = React.createRef();
    this.state = {
      wrapperHeight: 0,
      wrapperWidth: 0
    };
    this.updateDimensions = this.updateDimensions.bind(this);
  }

  updateDimensions() {
    if (!this.nodeRef) return;
    const node = this.nodeRef.current;
    const outerNode = node.parentNode;

    this.setState({
      heightProportion: outerNode.clientHeight,
      widthProportion: outerNode.clientWidth
    });
  }

  componentDidMount() {
    this.updateDimensions();
    window.addEventListener('resize', this.updateDimensions);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }

  render() {

    return (
      <CarouselProvider
        ref={this.nodeRef}
        naturalSlideWidth={this.state.widthProportion}
        naturalSlideHeight={this.state.heightProportion}
        {...this.props}
      >
        {this.props.children}
      </CarouselProvider>
    );
  }
}

export default FullContainerCarouselProvider;

The use case is so common (I guess) that it would be better to make naturalSlideWidth/naturalSlideHeight optional. If they are omitted, the carousel would occupy all the outer space available.

If we will make naturalSlideWidth/naturalSlideHeight optional, there is a catch that should be mentioned in the readme: the containing element must have its dimensions specified.

[petercutting]

Hi I am useing your carousel in a phonegap Material UI SPA. The user can swipe thru a bunch of pages (lists, no images). I just want the carousel to fill its parent container, so naturalSlideHeight and naturalSlideWidth are no good to me. My SPA has a responsive sidebar menu depending on screen width. Hoping you can make this vanilla scenario practical

[ospfranco]

Heyo, I was trying to use this component, but the use of the naturalHeight naturalWidth props is very very confusing… also as stated in this issue, sometimes you just want a carousel that fills the entire screen so far I’ve been stumbling around the myriad of possible props I can pass to this component (intrinsicHeight?) and nothing seems to work

It seems like when created the focus was a very specific use case in mind and has been retro fitted to appeal to the broadest possible cases

anyways, I’m about to give up and try a different component, but maybe someone can point out to me if they actually managed to get this working as a full height component?