only render a component on client-side

I’m trying to use react-select and got an error throw document is not defined. I assume this is because it’s trying to render the component on the server side and there’s no document.

What’s the best way to only render a specific component only on the client side?

<bountysource-plugin>

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

[hellais]

I tried the canUseDOM solution and it worked for me. However it is showing a warning, invalid checksum about the markup being generated is different on the client. I think this means React redraws the markup on the client-side.

I also ran into this issue. As a way to resolve it used a state variable to ensure the client-side only module is rendered after the first render, like this:

import React, { PropTypes } from 'react';

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {appIsMounted: false};
  }

  componentDidMount() {
    requestAnimationFrame(() => {
      this.setState({ appIsMounted: true });
    });
  }

  render() {
    return (
      <div>
      { this.state.appIsMounted
        && React.createElement(
          require('../../client-side-only').default
        )
      }
      </div>
    );
  }
}

Hope this helps somebody else…

[markserbol]

I tried the canUseDOM solution and it worked for me. However it is showing a warning, invalid checksum about the markup being generated is different on the client. I think this means React redraws the markup on the client-side. Is it possible to get rid of this warning?