feat: add useSessionStorage hook

* Add useSessionStorage

* chore: uncomment session storage docs story

README.md

@@ -66,6 +66,7 @@
   - [`useCss`](./docs/useCss.md) — dynamically adjusts CSS.
   - [`useFavicon`](./docs/useFavicon.md) — sets favicon of the page.
   - [`useLocalStorage`](./docs/useLocalStorage.md) — manages a value in `localStorage`.
+  - [`useSessionStorage`](./docs/useSessionStorage.md) — manages a value in `sessionStorage`.
   - [`useTitle`](./docs/useTitle.md) — sets title of the page.
     <br/>
     <br/>

docs/useSessionStorage.md

@@ -0,0 +1,35 @@
+# `useSessionStorage`
+
+React side-effect hook that manages a single `sessionStorage` key.
+
+
+## Usage
+
+```jsx
+import {useSessionStorage} from 'react-use';
+
+const Demo = () => {
+  const [value, setValue] = useSessionStorage('my-key', 'foo');
+
+  return (
+    <div>
+      <div>Value: {value}</div>
+      <button onClick={() => setValue('bar')}>bar</button>
+      <button onClick={() => setValue('baz')}>baz</button>
+    </div>
+  );
+};
+```
+
+
+## Reference
+
+```js
+useSessionStorage(key);
+useSessionStorage(key, initialValue);
+useSessionStorage(key, initialValue, raw);
+```
+
+- `key` &mdash; `sessionStorage` key to manage.
+- `initialValue` &mdash; initial value to set, if value in `sessionStorage` is empty.
+- `raw` &mdash; boolean, if set to `true`, hook will not attempt to JSON serialize stored values.

src/__stories__/useSessionStorage.story.tsx

@@ -0,0 +1,21 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useSessionStorage} from '..';
+
+const Demo = () => {
+  const [value, setValue] = useSessionStorage('hello-key', 'foo');
+
+  return (
+    <div>
+      <div>Value: {value}</div>
+      <button onClick={() => setValue('bar')}>bar</button>
+      <button onClick={() => setValue('baz')}>baz</button>
+    </div>
+  );
+};
+
+storiesOf('useSessionStorage', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useSessionStorage.md')} />)
+  .add('Demo', () =>
+    <Demo/>
+  )

src/index.ts

@@ -31,6 +31,7 @@ import useOrientation from './useOrientation';
 import useOutsideClick from './useOutsideClick';
 import useRaf from './useRaf';
 import useRenderProp from './useRenderProp';
+import useSessionStorage from './useSessionStorage';
 import useSetState from './useSetState';
 import useSize from './useSize';
 import useSpeech from './useSpeech';
@@ -78,6 +79,7 @@ export {
   useOutsideClick,
   useRaf,
   useRenderProp,
+  useSessionStorage,
   useSetState,
   useSize,
   useSpeech,

src/useSessionStorage.ts

@@ -0,0 +1,40 @@
+import {useState, useEffect} from './react';
+
+const isClient = typeof window === 'object';
+
+const useSessionStorage = <T>(key: string, initialValue?: T, raw?: boolean): [T, (value: T) => void] => {
+  if (!isClient) {
+    return [initialValue as T, () => {}];
+  }
+
+  const [state, setState] = useState<T>(() => {
+    try {
+      const sessionStorageValue = sessionStorage.getItem(key);
+      if (typeof sessionStorageValue !== 'string') {
+        sessionStorage.setItem(key, raw ? String(initialValue) : JSON.stringify(initialValue));
+        return initialValue;
+      } else {
+        return raw ? sessionStorageValue : JSON.parse(sessionStorageValue || 'null');
+      }
+    } catch {
+      // If user is in private mode or has storage restriction
+      // sessionStorage can throw. JSON.parse and JSON.stringify
+      // cat throw, too.
+      return initialValue;
+    }
+  });
+
+  useEffect(() => {
+    try {
+      const serializedState = raw ? String(state) : JSON.stringify(state);
+      sessionStorage.setItem(key, serializedState);
+    } catch {
+      // If user is in private mode or has storage restriction
+      // sessionStorage can throw. Also JSON.stringify can throw.
+    }
+  });
+
+  return [state, setState];
+};
+
+export default useSessionStorage;