docs(Responsive): clarify SSR usage (#3373)

Semantic-Org · Jan 10, 2019 · d53b354 · d53b354
1 parent 01e2395
commit d53b354
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git a/docs/src/examples/addons/Responsive/Usage/index.js b/docs/src/examples/addons/Responsive/Usage/index.js
@@ -1,10 +1,28 @@
 import React from 'react'
+import { Button, Message, Segment } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const ResponsiveUsageExamples = () => (
   <ExampleSection title='Usage'>
+    <Segment>
+      <Message info>
+        The <code>Responsive</code> component relies on browser environment
+        variables and requires some additions tricks to work correctly with the
+        server side rendering. We prepared an example that uses{' '}
+        <code>Responsive</code> and NextJS.
+      </Message>
+      <Button
+        content='Try on CodeSandbox'
+        color='black'
+        href='https://codesandbox.io/s/ly3zpw7yzm'
+        icon='codepen'
+        size='small'
+        target='_blank'
+      />
+    </Segment>
+
     <ComponentExample
       title='Predefined breakpoints'
       description='Responsive has predefined breakpoints that mimics SUI default variables.'

diff --git a/docs/src/layouts/HomepageLayout.js b/docs/src/layouts/HomepageLayout.js
@@ -16,6 +16,15 @@ import {
   Visibility,
 } from 'semantic-ui-react'
 
+// Heads up!
+// We using React Static to prerender our docs with server side rendering, this is a quite simple solution.
+// For more advanced usage please check Responsive docs under the "Usage" section.
+const getWidth = () => {
+  const isSSR = typeof window === 'undefined'
+
+  return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth
+}
+
 /* eslint-disable react/no-multi-comp */
 /* Heads up! HomepageHeading uses inline styling, however it's not the best practice. Use CSS or styled components for
  * such things.
@@ -69,7 +78,7 @@ class DesktopContainer extends Component {
     const { fixed } = this.state
 
     return (
-      <Responsive minWidth={Responsive.onlyTablet.minWidth}>
+      <Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>
         <Visibility
           once={false}
           onBottomPassed={this.showFixedMenu}
@@ -131,7 +140,11 @@ class MobileContainer extends Component {
     const { sidebarOpened } = this.state
 
     return (
-      <Responsive as={Sidebar.Pushable} maxWidth={Responsive.onlyMobile.maxWidth}>
+      <Responsive
+        as={Sidebar.Pushable}
+        getWidth={getWidth}
+        maxWidth={Responsive.onlyMobile.maxWidth}
+      >
         <Sidebar
           as={Menu}
           animation='push'

diff --git a/docs/src/pages/Layouts.mdx b/docs/src/pages/Layouts.mdx
@@ -7,13 +7,9 @@ export const meta = {
 
 <Header as='h1' content='Layouts' textAlign='center' />
 
-<Header
-  as='h2'
-  content='Starter'
-  subheader='Examples to introduce components and their function'
-/>
+<Header as='h2' content='Starter' subheader='Examples to introduce components and their function' />
 
-<Card.Group stackable itemsPerRow='3'>
+<Card.Group stackable itemsPerRow='2'>
   <Card
     as={Link}
     to='/layouts/theming'
@@ -58,13 +54,9 @@ export const meta = {
   />
 </Card.Group>
 
-<Header
-  as='h2'
-  content='Pages'
-  subheader='Starter page templates'
-/>
+<Header as='h2' content='Pages' subheader='Starter page templates' />
 
-<Card.Group stackable itemsPerRow='3'>
+<Card.Group stackable itemsPerRow='2'>
   <Card
     as={Link}
     to='/layouts/homepage'