Support for SSR (#22)

* update noflash.js * update package lockl * don’t publish all-contributors * update readme * updates for SSR * update use-persisted-state to 0.2.0 * bump version to 2.2.0
donavon · Feb 10, 2019 · 051e658 · 051e658
1 parent cfb3199
commit 051e658
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 19 deletions.
diff --git a/.npmignore b/.npmignore
@@ -7,3 +7,4 @@ __tests__
 coverage
 .prettierrc
 .travis.yml
+.all-contributorsrc
diff --git a/README.md b/README.md
@@ -1,9 +1,8 @@
 # use-dark-mode
-[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)
 
 A custom [React Hook](https://reactjs.org/docs/hooks-overview.html) to help you implement a "dark mode" component for your application.
 
-[![npm version](https://badge.fury.io/js/use-dark-mode.svg)](https://badge.fury.io/js/use-dark-mode) [![Build Status](https://travis-ci.com/donavon/use-dark-mode.svg?branch=develop)](https://travis-ci.com/donavon/use-dark-mode)
+[![npm version](https://badge.fury.io/js/use-dark-mode.svg)](https://badge.fury.io/js/use-dark-mode) [![Build Status](https://travis-ci.com/donavon/use-dark-mode.svg?branch=develop)](https://travis-ci.com/donavon/use-dark-mode) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)
 
 ![usedarkmode-small](https://user-images.githubusercontent.com/887639/51113468-079ee100-17d0-11e9-8a35-e29b12b74740.gif)
 
@@ -13,7 +12,7 @@ A custom [React Hook](https://reactjs.org/docs/hooks-overview.html) to help you
     You then setup your CSS to display different views based on the presence of the selector. For example, the following CSS is used in the demo app to ease the background color in/out of dark mode.
 
     ```css
-    body {
+    body.light-mode {
       background-color: #fff;
       color: #333;
       transition: background-color 0.3s ease;
@@ -42,6 +41,8 @@ and a system that supports dark mode, such as macOS Mojave.
 * Changing the system dark mode state will also change the state of `useDarkMode`
 (i.e, change to light mode in the system will change to light mode in your app).
 
+* Support for Server Side Rendering (SSR) in version 2.2 and above.
+
 ## Requirement
 
 To use `use-dark-mode`, you must use `react@16.8.0` or greater which includes Hooks.
@@ -89,9 +90,9 @@ when de-selected.
 
 ```jsx
 import React from 'react';
+import useDarkMode from 'use-dark-mode';
 
 import Toggle from './Toggle';
-import useDarkMode from 'use-dark-mode';
 
 const DarkModeToggle = () => {
   const darkMode = useDarkMode(false);
@@ -120,7 +121,7 @@ However, the user will see a flash of light mode before the app is spun up
 and `useDarkMode` is called.
 
 To prevent this, I've included some vanilla JavaScript that you can insert in your
-`index.html` just after the `<body>` tag. It is in a file named `noflash.js.txt`.
+`index.html` just after the `<body>` tag. It is in a file named [`noflash.js.txt](https://github.com/donavon/use-dark-mode/blob/develop/noflash.js.txt).
 You can either insert the contents of this file in a `<script>` tag or automate the
 step in your build process.
 
@@ -148,4 +149,4 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/all-contri
 | :---: | :---: | :---: | :---: | :---: |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
diff --git a/noflash.js.txt b/noflash.js.txt
@@ -1,7 +1,9 @@
-// Insert this script as-is in your index.html right after the <body> tag.
+// Insert this script in your index.html right after the <body> tag.
 // This will help to prevent a flash if dark mode is the default.
 
 (function() {
+  // Change these if you use sometthing different in your hook.
+  var storageKey = 'darkMode';
   var classNameDark = 'dark-mode';
   var classNameLight = 'light-mode';
 
@@ -15,7 +17,7 @@
   var supportsColorSchemeQuery = mql.media === preferDarkQuery;
   var localStorageTheme = null;
   try {
-    localStorageTheme = localStorage.getItem('darkMode');
+    localStorageTheme = localStorage.getItem(storageKey);
   } catch (err) {}
   var localStorageExists = localStorageTheme !== null;
   if (localStorageExists) {
@@ -29,10 +31,10 @@
   } else if (supportsColorSchemeQuery) {
     // source of truth from system
     setClassOnDocumentBody(mql.matches);
-    localStorage.setItem('darkMode', mql.matches);
+    localStorage.setItem(storageKey, mql.matches);
   } else {
     // source of truth from document.body
     var isDarkMode = document.body.classList.contains(classNameDark);
-    localStorage.setItem('darkMode', JSON.stringify(isDarkMode));
+    localStorage.setItem(storageKey, JSON.stringify(isDarkMode));
   }
 })();
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "use-dark-mode",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "A custom React Hook to help you implement a \"dark mode\" component.",
   "main": "dist/use-dark-mode.js",
   "umd:main": "dist/use-dark-mode.umd.js",
@@ -60,6 +60,6 @@
     }
   },
   "dependencies": {
-    "use-persisted-state": "^0.1.0"
+    "use-persisted-state": "^0.2.0"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,15 @@
 import { useEffect, useCallback } from 'react';
 import createPersistedState from 'use-persisted-state';
 
+const noop = () => {};
+
+const defaultElement = (global.document && global.document.body) || {
+  classList: {
+    add: noop,
+    remove: noop,
+  },
+};
+
 const ONCE = [];
 
 const preferDarkQuery = '(prefers-color-scheme: dark)';
@@ -12,13 +21,13 @@ const defaultClassNameLight = 'light-mode';
 const defaultConfig = {
   classNameDark: defaultClassNameDark,
   classNameLight: defaultClassNameLight,
-  element: global.document.body,
+  element: defaultElement,
 };
 const mql = global.matchMedia
   ? global.matchMedia(preferDarkQuery)
   : {
-    addListener() {},
-    removeListener() {},
+    addListener: noop,
+    removeListener: noop,
   };
 
 const setDOMClass = (element, method, className) => {