Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update width on viewport resize #160

Open
intelligence opened this issue Jun 11, 2019 · 1 comment
Open

Update width on viewport resize #160

intelligence opened this issue Jun 11, 2019 · 1 comment

Comments

@intelligence
Copy link

Currently it seems as the input will keep it's width after the browser has resized.

I'm struggling to understand how to hook into the methods of the components to force an update, some help with an example would be appreciated!

@dannypule
Copy link

My workaround for this was to update the key prop on ReactInputAutosize when the window resized. Then key is updated it causes ReactInputAutosize to be recreated

  state = {
    key: 0
  };

  componentDidMount() {
    this.timeout = setTimeout(() => {
      this.setCorrectInputWidth();
    });

    window.addEventListener('resize', this.setCorrectInputWidth);
  }

  componentWillUnmount() {
    clearTimeout(this.timeout);
    window.removeEventListener('resize', this.setCorrectInputWidth);
  }

setCorrectInputWidth = () => {
    this.setState(prevState => ({ key: prevState.key + 1 }));
};

<ReactInputAutosize
  key={this.state.key}
/>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants