Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to use React to achieve full-screen components". In daily operation, I believe many people have doubts about how to use React to achieve full-screen components. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to use React to achieve full-screen components". Next, please follow the editor to study!

Introduction

The reason is that the developer today gave me a sql editor input box is relatively small, does not support magnification, is not very convenient. Hope to be able to display it on full screen, thinking that you may need it in the future, so study and record it.

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

Full screen

You should all have seen the full screen button in the web page, and when you click it, the page becomes full screen, which often appears in the code editor.

The picture above shows the full-screen effect of leetcode, omitting menus and other contents.

It seems that there are many kinds of full-screen display. Let me tell you my opinion.

Leetcode, it's just a full-screen page.

F11 We can press F11 to enter full screen mode. It comes with chrome and does not need to modify the code.

Changing dom, like the first one, only hides part of the browser's content.

As in the image above, the body of the browser is gone.

Full screen usefulness

Full-screen, it seems that you need it when you want to devote yourself to reading, just as people like full-screen when watching movies. The main thing is to enlarge the component so that a large number of input / reading operations can be carried out more happily in ♀.

Install react-full-screen

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

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

Write the simplest component

Here directly on the code, the code is not much, 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 both full-screen and non-full-screen styles, such as 200 for full and 100 const for non-full height [full, setFull] = useState (false); / / create a handle const handle for fullScreen = useFullScreenHandle () Return (left card {/ / Click to set full to true, and then call the enter method of handle to enter full screen mode setFull (true) Handle.enter ();}} / > {setFull (false); handle.exit () }} / > suppose this is an editor);}; ReactDOM.render (, document.getElementById ("container"))

It is shown like this, with comments added to the code, and you can just look at it. Due to the lack of support in codesandbox, I put it into an antd pro project to show you the results.

In this way, we only magnify the effect of the editor and hide the other unimportant parts (the left part).

Existing problems

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

The default background is black, which is unfriendly. We need to set the style.

We should make the editor higher in full screen mode.

There are still sinkholes. We'll talk about it later.

Break the background color one by one

The library we use will wrap a global div by default, with a class of .fullscreen.fullscreen-enabled when full screen and fullscreen when not full screen.

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 is already in effect, and we have added padding so that it looks like Card will not be pushed to the side.

Height

We set the full variable earlier, so let's modify the code to determine the height based on full.

You can see that the height of the box has changed.

Extension part

If you think it's over, you're wrong. Next, let's talk about the pit.

In antd components, modal/drawer/message, and so on, are dom elements generated in body, so what problems do we encounter?

You can't see dialog boxes / message prompts at all in full-screen mode.

Fortunately, antd provides the corresponding parameters to control the mount elements of the dom.

Modal

Modal can be solved like this. Let's first set up an id for full_screen:

Note that this id must be in the FullScreen component.

Then we add the following parameters to the Modal.info,Modal component:

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

An api like Modal.info

Modal.info ({title: 'cud request parameters', width: 800, / / add this getContainer: document.getElementById ('full_screen')}) message

Pass in the getContainer method via message.config:

I didn't find a good way here. I need to config every time I message.info, which is quite troublesome. If it is used as a global configuration, there may be problems. There is a better way to leave a message.

At this point, the study on "how to use React to achieve full-screen components" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.