{"id":1224,"date":"2021-01-21T12:09:33","date_gmt":"2021-01-21T20:09:33","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=1224"},"modified":"2021-01-21T12:09:33","modified_gmt":"2021-01-21T20:09:33","slug":"dual-screen-react-web","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/dual-screen-react-web\/","title":{"rendered":"Building dual-screen web experiences with React"},"content":{"rendered":"

Hello web developers!<\/p>\n

\n Responsive design has always been the cornerstone of web development, rather than designing for a single use case, we focus on creating applications that can adjust to the needs of the platform they are running on. Microsoft Surface Duo is no exception to this and in past blog posts we\u2019ve explored how we can use the CSS and JavaScript primitives<\/a> to create experiences using standard web technologies<\/a>. With the web being as complex a platform as it is, many developers prefer to use frameworks and libraries to help them build rich, complex responsive web applications.\n<\/p>\n

\n In this post, we\u2019ll look at how we can use one of the most popular libraries, React<\/a>, to build a foldable web experience. We\u2019ll take the photo gallery demo<\/a> and make a React version of it, then look at how we can leverage the power of React to make a foldable experience.\n<\/p>\n

\n \"AnimationFigure 1: Animation of the photo gallery and web developer tools (click to start)<\/em>\n<\/p>\n

Creating the demo<\/h2>\n

\n To keep the demo application as simple as possible, we\u2019ve used Create React App<\/a> to scaffold up the application, using the TypeScript Template<\/a> to give us type-safety in the codebase.\n<\/p>\n

\n The full source code of the demo, which has converted the existing photo gallery to a React application, can be found on GitHub<\/a>, but let\u2019s look at a few specific parts of it.\n<\/p>\n

App.tsx<\/h2>\n

\n This is the entry point for our application and contains some state for which image is selected presently, then adds components to the component tree representing how our application works.\n<\/p>\n

import React, { useState } from \"react\";\r\nimport images, { Image } from \".\/images\";\r\nimport \".\/App.css\";\r\nimport Gallery from \".\/Gallery\";\r\nimport Details from \".\/DetailContainer\";\r\nimport Fold from \".\/Fold\";\r\nimport FullView from \".\/FullView\";\r\nimport { Container } from \".\/App.styles\";\r\n\r\nfunction App() {\r\n  const [currentImage, setCurrentImage] = useState<Image>();\r\n\r\n  return (\r\n    <Container>\r\n      <Gallery images={images} selectImage={setCurrentImage} \/>\r\n      <Fold \/>\r\n      <Details currentImage={currentImage} \/>\r\n      <FullView\r\n        currentImage={currentImage}\r\n        closeImage={() => setCurrentImage(undefined)}\r\n        prevImage={(image) =>\r\n          setCurrentImage(images[images.indexOf(image) - 1])\r\n        }\r\n        nextImage={(image) =>\r\n          setCurrentImage(images[images.indexOf(image) + 1])\r\n        }\r\n      \/>\r\n    <\/Container>\r\n  );\r\n}\r\n\r\nexport default App;<\/pre>\n
\n  Straight away we can see what the application is doing succinctly, we have a Container component which holds the application, and within that there are four components, Gallery, Fold, Details and FullView.\n<\/p>\n
\n  Let\u2019s have a look at the Container component to see how we\u2019ve styled it.\n<\/p>\n
import styled from \"styled-components\";\r\n\r\nexport const Container = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  @media (screen-spanning: single-fold-vertical) {\r\n    flex-direction: row;\r\n  }\r\n\r\n  @media (screen-spanning: single-fold-horizontal) {\r\n    flex-direction: column-reverse;\r\n  }\r\n\r\n  @media (screen-spanning: none) {\r\n    flex-direction: row;\r\n  }\r\n`;<\/pre>\n
\n  We\u2019re using Styled Components<\/a>, a popular library for doing CSS-in-JavaScript and component styling. We can see that in the styles we\u2019re applying, the appropriate media queries exist to make the application responsive across a single and dual-screen device. This means that our component is ready to go when it comes to working on a dual-screen device.\n<\/p>\n
Fold, Details, and FullView<\/h2>\n
\n  These three components are used for different display options, depending on whether we\u2019re on a single or dual-screen device. For example, we don\u2019t need to include the Fold if we\u2019re on a single screen, as the screen doesn\u2019t have a fold, so we can use CSS to hide it.\n<\/p>\n
import styled from \"styled-components\";\r\n\r\nconst Fold = styled.div`\r\n  background-size: 40px 40px;\r\n\r\n  background-color: #737373;\r\n  background-image: linear-gradient(\r\n    45deg,\r\n    rgba(255, 255, 255, 0.2) 25%,\r\n    transparent 25%,\r\n    transparent 50%,\r\n    rgba(255, 255, 255, 0.2) 50%,\r\n    rgba(255, 255, 255, 0.2) 75%,\r\n    transparent 75%,\r\n    transparent\r\n  );\r\n\r\n  @media (screen-spanning: single-fold-vertical) {\r\n    height: env(fold-height);\r\n    width: env(fold-width);\r\n  }\r\n\r\n  @media (screen-spanning: single-fold-horizontal) {\r\n    height: env(fold-height);\r\n    width: env(fold-width);\r\n  }\r\n\r\n  @media (screen-spanning: none) {\r\n    height: 0;\r\n    width: 0;\r\n  }\r\n`;\r\n\r\nexport default Fold;<\/pre>\n
\n  As we can see here, there\u2019s a lot of CSS being loaded when we\u2019re going to end up hiding the element when it matches @media\u00a0(screen-spanning:\u00a0none). We have used a similar approach on the Details component, and the inverse for FullView, as it is hidden when we are in dual-screen mode.\n<\/p>\n
\n  With all this in place, our application is ready to go, and you can view it here<\/a>.\n<\/p>\n
\n  But we\u2019re not leveraging the real power of React, in fact, we\u2019re doing a bit of a disservice to React as we\u2019re adding components to the component tree that don\u2019t need to be there. Let\u2019s look at the component structure:\n<\/p>\n
\n  \"DeveloperFigure 2: React component structure<\/em>\n<\/p>\n
\n  You\u2019ll notice that we\u2019re adding both the Details and FullView components (and Fold for that matter), regardless of whether it\u2019s needed or not, then relying on CSS to hide\/show the right version. While this might not be an issue in our demo application, in a more complex application, this could manifest itself as a performance issue as we\u2019re rendering components unnecessarily.\n<\/p>\n
Introducing react-foldable<\/h2>\n
\n  To make it easy to work with foldable displays from React, we can use the react-foldable npm package<\/a>, which will provide us with components and hooks which expose the information from the underlying DOM APIs.\n<\/p>\n
Creating a foldable region<\/h3>\n
\n  Because part of our application may always be available regardless of whether we have a single or dual-screen experience, such as the Gallery, react-foldable gives us a component that allows us to make only part of the application \u201cfoldable aware\u201d.\n<\/p>\n
\n  Let\u2019s revisit the App.tsx file and have it use the Foldable component:\n<\/p>\n
import { Foldable } from \"@aaronpowell\/react-foldable\";\r\n\r\nfunction App() {\r\n  const [currentImage, setCurrentImage] = useState<Image>();\r\n\r\n  return (\r\n    <Container>\r\n      <Gallery images={images} selectImage={setCurrentImage} \/>\r\n      <Fold \/>\r\n      <Details currentImage={currentImage} \/>\r\n      <FullView\r\n        currentImage={currentImage}\r\n        closeImage={() => setCurrentImage(undefined)}\r\n        prevImage={(image) =>\r\n          setCurrentImage(images[images.indexOf(image) - 1])\r\n        }\r\n        nextImage={(image) =>\r\n          setCurrentImage(images[images.indexOf(image) + 1])\r\n        }\r\n      \/>\r\n      <Foldable>\r\n        \r\n      <\/Foldable>\r\n    <\/Container>\r\n  );\r\n}\r\n\r\nexport default App;<\/pre>\n
\n  The Foldable component itself doesn\u2019t change how our application works, we do that by adding FoldableScreen components to it. The FoldableScreen component is a wrapper around parts of our component tree that will be conditionally added or removed, depending on a test we provide against the foldable state of the application.\n<\/p>\n
\n  Let\u2019s make it so the Fold and Details components are not included unless we\u2019ve spanned across to a second screen:\n<\/p>\n
return (\r\n    <Container>\r\n      <Gallery images={images} selectImage={setCurrentImage} \/>\r\n      <FullView\r\n        currentImage={currentImage}\r\n        closeImage={() => setCurrentImage(undefined)}\r\n        prevImage={(image) =>\r\n          setCurrentImage(images[images.indexOf(image) - 1])\r\n        }\r\n        nextImage={(image) =>\r\n          setCurrentImage(images[images.indexOf(image) + 1])\r\n        }\r\n      \/>\r\n      <Foldable>\r\n        <FoldableScreen matchScreen={1}>\r\n          <React.Fragment>\r\n            <Fold \/>\r\n            <Details currentImage={currentImage} \/>\r\n          <\/React.Fragment>\r\n        <\/FoldableScreen>\r\n      <\/Foldable>\r\n    <\/Container>\r\n  );<\/pre>\n
\n  On FoldableScreen we can provide a matchScreen prop, which takes a number that matches a segment in the windowSegments data. It\u2019s important to remember that this is working from a zero-based index, so the \u201csecond screen\u201d is the screen segment in position 1 of the array.\n<\/p>\n
\n  Next, we want to hide the FullView component if we\u2019re not spanned across multiple screens, and we can\u2019t do that by providing a matchScreen value of 0 as there\u2019s always a screen there, we instead can provide a match function.\n<\/p>\n
return (\r\n    <Container>\r\n      <Gallery images={images} selectImage={setCurrentImage} \/>\r\n\r\n      <Foldable>\r\n        <FoldableScreen matchScreen={1}>\r\n          <React.Fragment>\r\n            <Fold \/>\r\n            <Details currentImage={currentImage} \/>\r\n          <\/React.Fragment>\r\n        <\/FoldableScreen>\r\n\r\n        <FoldableScreen match={({ isDualScreen }) => !isDualScreen}>\r\n          <FullView\r\n            currentImage={currentImage}\r\n            closeImage={() => setCurrentImage(undefined)}\r\n            prevImage={(image) =>\r\n              setCurrentImage(images[images.indexOf(image) - 1])\r\n            }\r\n            nextImage={(image) =>\r\n              setCurrentImage(images[images.indexOf(image) + 1])\r\n            }\r\n          \/>\r\n        <\/FoldableScreen>\r\n      <\/Foldable>\r\n    <\/Container>\r\n  );<\/pre>\n
\n  The match prop takes a function which receives an argument that has three properties, isDualScreen, windowSegments (the array of DOMRect), and screenSpanning (is the screen spanned as vertical, horizontal, or none, matching the media query). If we\u2019re not in dual-screen mode we can render the component, so that\u2019s what we\u2019ll return from our function.\n<\/p>\n
\n  Now when we run our application and look at the component tree, we\u2019ll notice that it starts a lot smaller as there\u2019s no selected image, and as we transition between single and dual-screen, the components loaded are going to change.\n<\/p>\n
\n  \"AnimationFigure 3: Animation of the photo gallery using react-foldable (click to start)<\/em>\n<\/p>\n
Conclusion<\/h2>\n
\n  Here we\u2019ve seen how we can leverage the power of React to make a foldable web experience and use the react-foldable library to expose the important information about the underlying foldable state of an application to have our component tree only represent what our application needs.\n<\/p>\n
\n  You can view the initial application<\/a> (code<\/a>), and the updated version using react-foldable<\/a> (code<\/a>).\n<\/p>\n
\n  If you want to learn more about the react-foldable library, check out the GitHub repository<\/a>. For more information on dual-screen web development, visit the dual-screen web developer documentation<\/a>.\n<\/p>\n
\n  The Surface Duo Developer Experience team is keen to hear about your experiences building dual-screen web apps – reach out via our forum<\/a> or on Twitter @surfaceduodev<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Hello web developers! Responsive design has always been the cornerstone of web development, rather than designing for a single use case, we focus on creating applications that can adjust to the needs of the platform they are running on. Microsoft Surface Duo is no exception to this and in past blog posts we\u2019ve explored how […]<\/p>\n","protected":false},"author":40333,"featured_media":1237,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[412,711,46,413,530],"class_list":["post-1224","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-javascript","tag-react","tag-surface-duo","tag-typescript","tag-web"],"acf":[],"blog_post_summary":"
Hello web developers! Responsive design has always been the cornerstone of web development, rather than designing for a single use case, we focus on creating applications that can adjust to the needs of the platform they are running on. Microsoft Surface Duo is no exception to this and in past blog posts we\u2019ve explored how […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/40333"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=1224"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1224\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/1237"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=1224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=1224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=1224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}