How to make React components full screen

introduce

This article is based on React + antd to demonstrate a complete全屏demo .

The reason is that the developer gave me a sql編輯器輸入框is relatively small and does not support zooming in, which is not very convenient. I hope it can be displayed in full screen, and thinking that I may need it in the future, I studied and recorded it.

Actually, I don’t think it’s very small (orz)

full screen

You must have seen the全屏button in the web page. After clicking it, the page becomes full screen. It often appears in代碼編輯器.

The picture above shows the effect of LeetCode in full screen, omitting the menu and other內容.

It seems that there很多種types of full-screen displays. Let me tell you what I think.

• Leetcode is just a full screen page
• F11 We can press F11 to enter full screen mode, which is built-in to Chrome and does not require code modification
• Changing the DOM is actually the same as the first method, but it will hide part of the browser content

As shown in the picture above,瀏覽器shell is gone.

The use of full screen

As for full screen, it seems that it is more necessary when you want投入yourself to reading, just like people like看電影in full screen. It's mostly about放大components to make heavy typing/reading more enjoyable.

Install react-full-screen

// yarn add react-full-screen
npm install react-full-screen --save

Install this library using yarn or npm. The official website provides some demos, the link is here.

Write a simple component

Here is the code directly. There is not much代碼and it is easy to understand.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
import { Tooltip, Card, Col, Row } from "antd";
import { FullScreen, useFullScreenHandle } from "react-full-screen";

const App = () => {
  // Define the full variable to be compatible with full screen and non-full screen styles. For example, the height of full is 200 and the height of non-full is 100
  const [full, setFull] = useState(false);
  // Create a fullScreen handle
  const handle = useFullScreenHandle();

  return (
    <div style={{ background: "#ececec", height: 500 }}>
      <Row gutter={[8, 8]}>
        <Col span={8}>
          <Card style={{ height: 500 }}>Left card</Card>
        </Col>
        <Col span={16}>
          <FullScreen
            handle={handle}
            onChange={setFull}
            style={{ background: "#ffffff" }}
          >
            <Card style={{ height: 500 }}>
              <div>
                <Tooltip title="Full Screen">
                  <FullscreenOutlined
                    style={{ fontSize: 16 }}
                    onClick={() => {
                      // Click to set full to true, then call the enter method of handle to enter full screen mode setFull(true);
                      handle.enter();
                    }}
                  />
                </Tooltip>
                <Tooltip title="Exit full screen">
                  <FullscreenExitOutlined
                    style={{ fontSize: 16, marginLeft: 16 }}
                    // Exit fullscreen mode and set full to false
                    onClick={() => {
                      setFull(false);
                      handle.exit();
                    }}
                  />
                </Tooltip>
              </div>
              <div>Assume this is an editor</div>
            </Card>
          </FullScreen>
        </Col>
      </Row>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("container")); 

This is what it looks like.注釋are added to the code, so you can just look at it. Since it is not supported in codesandbox , I put it in an antd pro project to show you the effect.

In this way, we have achieved the effect of only enlarging編輯器and hiding other unimportant parts (the left part).

Problems

This is far from enough, there are still some details to be優化.

• The default background is black, which is not user friendly. We need to set the style.
• We should make the editor height larger in fullscreen mode
• There are also dark pits, I will talk about them later

Defeat them one by one

Background color

The library we use will wrap a global div by default. When full screen, the class is .fullscreen.fullscreen-enabled , and when not full screen, it is fullscreen .

So we can write the following css in the global/component style:

.fullscreen.fullscreen-enabled {
  background: #fff;
  padding: 24px;
}

You can see that this style has生效, and we have added padding so that the Card does not appear to擠到邊上.

high

We have previously set the full variable, so we modify the code to determine the height based on full.

You can see that高度of the box has changed.

Extensions

If you think this is the end, you are大錯特錯. Next, let’s talk about dark pits.

In the antd component, modal/drawer/message, etc. are all DOM elements generated in the body, so遇到什么問題呢?

In全屏模式you can't see dialog boxes/message prompts, etc.

But好在antd provides corresponding parameters to control the mounting elements of dom.

Modal

Modal can be solved like this. First, we set a full_screen id:

Note that this id must be in the FullScreen component.

Then we add the following parameters to Modal.info and Modal components:

Note: The modal here is not included in my demo, it belongs to the extension part. Writing a modal component is not complicated, you can try it yourself.

Modal.info API

Modal.info({
  title: 'cud request parameters',
  width: 800,
  // Note the addition of getContainer: document.getElementById('full_screen')
  })

message

Pass the getContainer method through message.config:

I haven’t found a good solution here. It’s quite troublesome to configure message.info every time. If全局配置, there may be problems. If you have a better solution, please leave a message.

This is the end of this article about React's full-screen component implementation. For more relevant React component full-screen content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!