install react-snap

Author: hosmelq

package.json

@@ -25,6 +25,7 @@
  "deploy": "react-scripts build && cp CNAME build/ && gh-pages -d build",
  "eject": "react-scripts eject",
  "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
+ "postbuild": "react-snap",
  "start": "react-scripts start",
  "test": "react-scripts test"
  },
@@ -47,5 +48,8 @@
  "prettier --write",
  "git add"
  ]
+ },
+ "devDependencies": {
+ "react-snap": "1.23.0"
  }
 }

src/components/EventCard/index.js

@@ -30,11 +30,14 @@ export default function EventCard(props) {
  overflow="hidden"
  shadow="md"
  >
- <Image
- alt={props.name}
- src={buildStaticMapUrl(latitude, longitude)}
- width="100%"
- />
+ {process.env.NODE_ENV === 'production' &&
+ navigator.userAgent !== 'ReactSnap' && (
+ <Image
+ alt={props.name}
+ src={buildStaticMapUrl(latitude, longitude)}
+ width="100%"
+ />
+ )}
  <Flex direction="column" flex={1} p={4}>
  <Link href={`https://www.facebook.com/events/${props.id}`}>
  <Heading

src/index.js

@@ -5,7 +5,13 @@ import './icons';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const rootElement = document.getElementById('root');
+
+if (rootElement.hasChildNodes()) {
+ ReactDOM.hydrate(<App />, rootElement);
+} else {
+ ReactDOM.render(<App />, rootElement);
+}
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.