How to use the exenv.canUseDOM function in exenv

import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import TransitionGroup from 'react-transition-group/TransitionGroup';
import sizeMe from 'react-sizeme';
import shallowequal from 'shallowequal';
import ExecutionEnvironment from 'exenv';
import invariant from 'invariant';
import GridItem from './GridItem';
import { transition } from '../utils/style-helper';
import { raf } from '../animations/request-animation-frame';
import * as easings from '../animations/easings';
import * as transitions from '../animations/transitions/';

import type { Units } from '../types/';

const imagesLoaded = ExecutionEnvironment.canUseDOM ? require('imagesloaded') : null;


const isNumber = (v: any): boolean => typeof v === 'number' && isFinite(v);
const isPercentageNumber = (v: any): boolean => typeof v === 'string' && /^\d+(\.\d+)?%$/.test(v);

// eslint-disable-next-line arrow-parens
const createArray = (v: T, l: number): T[] => {
  const array = [];
  for (let i = 0; i < l; i += 1) array.push(v);
  return array;
};

/* eslint-disable consistent-return */
const getColumnLengthAndWidth = (
  width: number,
  value: number | string,

});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// FIXME: Needs to handle assets files to work with SSR
if (require('exenv').canUseDOM) require('./EmbedNode.css');

var EmbedNode = function EmbedNode(_ref) {
  var attributes = _ref.attributes,
      editor = _ref.editor,
      children = _ref.children,
      node = _ref.node,
      isSelected = _ref.isSelected;

  return _react2.default.createElement('span', _extends({}, attributes, {
    className: (0, _classnames2.default)('slate-embed-plugin--node', { active: isSelected }),
    dangerouslySetInnerHTML: { __html: node.data.get('embed') }
  }));
};

exports.default = EmbedNode;

const tempoTileClass = vertical ? "TempoTileCarousel--vertical" : "TempoTileCarousel";

    const tileOptionProps = products ? _setTileOptionProps(tileOptions) : null;
    const tileHeight = products ? _getItemTileHeight(tileOptionProps, maxCompareValues) :
      _getCategoryTileHeight(titleAlignment);

    VERTICAL_CAROUSEL_PROPS.slidesToShow = _getSlideToShow(products);

    const CAROUSEL_PROPS = vertical ? {...VERTICAL_CAROUSEL_PROPS} : {...HORIZONTAL_CAROUSEL_PROPS};

    return (
      
        
          }
            beforeSlide={this._loadTiles}
            afterSlide={this._fireModuleView}>
            {products ?
              this._renderItemTiles(this.props, lazyLoadIndex, newAutomationId, tileOptionProps) :
              this._renderCategoryTiles(this.props, lazyLoadIndex, newAutomationId)}
          
        
      
    );
  }
  /* eslint-enable  max-statements*/

import React from 'react'
import { Button } from '@slate-editor/components'

// FIXME: Needs to handle assets files to work with SSR
if (require('exenv').canUseDOM) require('./ImageEditLayer.css')

const ImageEditLayer = ({ changeModalState, text }) => {
  return changeModalState ? (
    <div> changeModalState(true)}&gt;
      <button> changeModalState(true)}&gt;
        {text}
      </button>
    </div>
  ) : (
    <div style="{{backgroundColor:">
      <p>{text}</p>
    </div>
  )
}

export default ImageEditLayer

import React from "react";

import { UnorderedListButton, OrderedListButton } from "./";
// FIXME: Needs to handle assets files to work with SSR
if (require("exenv").canUseDOM) require("./ListButtonBar.css");

const ListButtonBar = props => (
  
    
    
  
);

export default ListButtonBar;

var _tooltip2 = _interopRequireDefault(_tooltip);

var _LinkDataModal = require('./LinkDataModal');

var _LinkDataModal2 = _interopRequireDefault(_LinkDataModal);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

// FIXME: Needs to handle assets files to work with SSR
if (require('exenv').canUseDOM) require('./LinkNode.css');

var LinkNode = function (_Component) {
  _inherits(LinkNode, _Component);

  function LinkNode(props) {
    _classCallCheck(this, LinkNode);

    var _this = _possibleConstructorReturn(this, (LinkNode.__proto__ || Object.getPrototypeOf(LinkNode)).call(this, props));

    _this.state = {
      isModalActive: false,
      mounted: false,
      presetData: { text: '' }
    };
    return _this;
  }

componentWillMount() {
    if (ExecutionEnvironment.canUseDOM) {
      // this check has to be performed before overflow is set to hidden
      if (documentHasVerticalScrollbar(window, document)) {
        document.body.style.marginRight = '15px'
      }

      document.body.style.overflow = 'hidden'
    }
  }

import React from 'react'
import classnames from 'classnames'

import { fontSizeStrategy, hasMark, getMark } from './FontSizeUtils'
// FIXME: Needs to handle assets files to work with SSR
if (require('exenv').canUseDOM) require('./FontSizeInput.css')

//
// It needs to check out how solve the warning below:
//
// warning.js:36 Warning: FontSizeInput is changing an uncontrolled input of
// type number to be controlled. Input elements should not switch from uncontrolled
// to controlled (or vice versa). Decide between using a controlled or uncontrolled
// input element for the lifetime of the component.
// More info: https://fb.me/react-controlled-components
//
const FontSizeInput = ({
  value,
  className,
  style,
  changeState,
  initialFontSize

componentDidMount() {
    if (ExecutionEnvironment.canUseDOM) {
      let script = require('scriptjs')
      script(twitter_widget_js, 'twitter-embed', () => {
        if (!window.twttr) {
          console.error('Failure to load window.twttr in TwitterMentionButton, aborting load.')
          return
        }

        if (!this.isMountCanceled) {
          window.twttr.widgets.createMentionButton(
            this.props.screenName,
            this.refs.embedContainer,
            this.props.options
          )
        }
      })
    }

componentDidMount() {
    if (ExecutionEnvironment.canUseDOM) {
      let script = require('scriptjs')
      script(twitter_widget_js, 'twitter-embed', () => {
        this.renderWidget()
      })
    }
  }