<img
  src="pic_1x.jpg"
  srcset="pic_1x.jpg 1x, pic_2x.jpg 2x"
/>

import React, { useState, createElement } from 'react';
import MessageList from './MessageList';
import MessageInput from './MessageInput';
import ErrorBoundary from './ErrorBoundary';
 
const Channel = () => {
  const [emojiPickerEl, setEmojiPickerEl] = useState(null);
 
  const openEmojiPicker = () => {
    import(/* webpackChunkName: "emoji-picker" */ './EmojiPicker')
      .then(module => module.default)
      .then(emojiPicker => {
        setEmojiPickerEl(createElement(emojiPicker));
      });
  };
 
  const closeEmojiPickerHandler = () => {
    setEmojiPickerEl(null);
  };
 
  return (
    <ErrorBoundary>
      <div>
        <MessageList />
        <MessageInput onClick={openEmojiPicker} />
        {emojiPickerEl}
      </div>
    </ErrorBoundary>
  );
};

{
      format: 'A4',
      printBackground: true,
      timeout: 300000,
      displayHeaderFooter: true,
      headerTemplate: '',
      footerTemplate: `
        <div class="page-footer" style="width:100%; text-align:center; font-size: 8px; color:#999999; background-color:#fcfcfc;">
          <span class="pageNumber"></span>
        </div>
      `,
      margin: { bottom: '15mm' },
      pageRanges: '2-',
 
}