Window resize

This is great! Thank you so much for this.

I noticed that when the browser window is resized it causes the canvas to stretch/shrink which causes the confetti particles to look pretty ugly. I solved it in user-land using the code below. But I was wondering if this wouldn’t better be solved by the library itself?

I wouldn’t mind opening a PR, I just wanted to get your input first before I work on it.

  constructor(props) {
    super(props);

    this.state = {
      confetti: {
        width: '100%',
        height: '100%',
      },
    };

    this.updateDimensions = this.updateDimensions.bind(this);
  }

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

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

  updateDimensions() {
    const main = document.querySelectorAll('#main')[0].getBoundingClientRect();
    this.setState({
      confetti: {
        width: main.width,
        height: main.height,
      },
    });
  }

  render() {
    return (
      <App
        {...this.props}
        title="Registration Complete"
        innerRef={(c) => { this.app = c; }}
      >
        <Confetti
          gravity={0.05}
          numberOfPieces={100}
          colors={[
            'rgba(255, 255, 255, 0.1)',
          ]}
          style={{ top: '-1px' }} // fix bug that shows black line
          {...this.state.confetti} // allows for browser resizing without stretching
        />
        <FlexHelper>
          <p><strong>Registration Complete</strong></p>
          <p>
            ...
          </p>
        </FlexHelper>
      </App>
    );
  }
}

[alampros]

@aesopwolf Glad you’re getting some use out of it and thanks for the suggestion!

In the interest of keeping the component simple, I think it might be best to keep all the dimension operations external.

I actually just solved this same problem in another project using react-dimensions. Very helpful little util.

import React from 'react'
import Confetti from 'react-confetti'
import Dimensions from 'react-dimensions'

export default Dimensions()(class MyComponent extends React.PureComponent {
  render() {
    return (
      <Confetti
        width={this.props.containerWidth}
        height={this.props.containerHeight}
      />
    )
  }
})

[alampros]

Thanks @adrianmcli !

I just updated the demo to actually use the react-dimensions also.