How to use the react-responsive.default function in react-responsive

const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const React = require('react');

const MediaQuery = require('react-responsive').default;
const frameless = require('../../../lib/frameless');

const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');

require('./hoc-banner.scss');

const TopBanner = () => (
    
        
            
                <h1>
                    
                </h1>

const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
const MediaQuery = require('react-responsive').default;
const React = require('react');

const FooterBox = require('../container/footer.jsx');
const LanguageChooser = require('../../languagechooser/languagechooser.jsx');

const frameless = require('../../../lib/frameless');

require('./footer.scss');

const Footer = props => (
    
        
            <div>
                <dl>
                    <dd>
                        <a href="/about"></a></dd></dl></div>

const bindAll = require('lodash.bindall');
const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
const MediaQuery = require('react-responsive').default;
const PropTypes = require('prop-types');
const React = require('react');

const frameless = require('../../lib/frameless');
const sessionActions = require('../../redux/session.js');
const shuffle = require('../../lib/shuffle.js').shuffle;

const AdminPanel = require('../../components/adminpanel/adminpanel.jsx');
const Box = require('../../components/box/box.jsx');
const Button = require('../../components/forms/button.jsx');
const Carousel = require('../../components/carousel/carousel.jsx');
const DropdownBanner = require('../../components/dropdown-banner/banner.jsx');
const IframeModal = require('../../components/modal/iframe/modal.jsx');
const Intro = require('../../components/intro/intro.jsx');
const LegacyCarousel = require('../../components/carousel/legacy-carousel.jsx');
const News = require('../../components/news/news.jsx');

const injectIntl = require('react-intl').injectIntl;
const PropTypes = require('prop-types');
const intlShape = require('react-intl').intlShape;
const FormattedMessage = require('react-intl').FormattedMessage;

const MediaQuery = require('react-responsive').default;
const React = require('react');
const Formsy = require('formsy-react').default;
const classNames = require('classnames');

const GUI = require('scratch-gui').default;
const IntlGUI = injectIntl(GUI);

const AdminPanel = require('../../components/adminpanel/adminpanel.jsx');
const decorateText = require('../../lib/decorate-text.jsx');
const FlexRow = require('../../components/flex-row/flex-row.jsx');
const Button = require('../../components/forms/button.jsx');
const Avatar = require('../../components/avatar/avatar.jsx');
const Banner = require('./banner.jsx');
const CensoredMessage = require('./censored-message.jsx');
const ModInfo = require('./mod-info.jsx');
const RemixCredit = require('./remix-credit.jsx');

const bindAll = require('lodash.bindall');
const classNames = require('classnames');
const MediaQuery = require('react-responsive').default;
const PropTypes = require('prop-types');
const React = require('react');

const frameless = require('../../lib/frameless');

require('./masonrygrid.scss');

class MasonryGrid extends React.Component {
    constructor (props) {
        super(props);
        bindAll(this, [
            'reorderColumns'
        ]);
    }
    reorderColumns (items, cols) {
        const a1 = [];

const bindAll = require('lodash.bindall');
const PropTypes = require('prop-types');
const React = require('react');
const MediaQuery = require('react-responsive').default;

const frameless = require('../../lib/frameless');

require('./info-button.scss');

class InfoButton extends React.Component {
    constructor (props) {
        super(props);
        bindAll(this, [
            'handleHideMessage',
            'handleShowMessage'
        ]);
        this.state = {
            visible: false
        };
    }

const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const React = require('react');
const MediaQuery = require('react-responsive').default;
const frameless = require('../../../lib/frameless');

const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');

require('./hoc-banner.scss');

const MiddleBanner = () => (
    
        
            
                <h1>
                    
                </h1>

const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const React = require('react');

const MediaQuery = require('react-responsive').default;

const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');

const frameless = require('../../../lib/frameless');

require('./middle-banner.scss');

const MiddleBanner = () => (
    
        
            <h2>
                
            </h2>
            <h3>
                </h3>