[docs] Bugfix/clean up (#24)

* cleaned up README

* updated README for returning values for each hook or utility

* updated deployed URL in README for cna-memory-considerate-animation

* [docs] Minor formatting improvements

Author: anton-karlovskiy

README.md

@@ -28,7 +28,6 @@ import { useNetworkStatus } from 'react-adaptive-hooks/network';
 import { useSaveData } from 'react-adaptive-hooks/save-data';
 import { useHardwareConcurrency } from 'react-adaptive-hooks/hardware-concurrency';
 import { useMemoryStatus } from 'react-adaptive-hooks/memory';
-
 ```
 
 and then use them in your components. Examples for each hook and utility can be found below:
@@ -68,6 +67,8 @@ const MyComponent = () => {
 };
 ```
 
+`effectiveConnectionType` values can be `slow-2g`, `2g`, `3g`, or `4g`.
+
 This hook accepts an optional `initialEffectiveConnectionType` string argument, which can be used to provide a `effectiveConnectionType` state value when the user's browser does not support the relevant [NetworkInformation API](https://wicg.github.io/netinfo/). Passing an initial value can also prove useful for server-side rendering, where the developer can pass an [ECT Client Hint](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints#ect) to detect the effective network connection type.
 
 ```js
@@ -95,6 +96,8 @@ const MyComponent = () => {
 };
 ```
 
+`saveData` values can be `true` or `false`.
+
 This hook accepts an optional `initialSaveDataStatus` boolean argument, which can be used to provide a `saveData` state value when the user's browser does not support the relevant [NetworkInformation API](https://wicg.github.io/netinfo/). Passing an initial value can also prove useful for server-side rendering, where the developer can pass a server [Save-Data Client Hint](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints#save-data) that has been converted to a boolean to detect the user's data saving preference.
 
 ```js
@@ -122,6 +125,8 @@ const MyComponent = () => {
 };
 ```
 
+`numberOfLogicalProcessors` values can be the number of logical processors available to run threads on the user's device. 
+
 ### Memory
 
 `useMemoryStatus` utility for adapting based on the user's device memory (RAM)
@@ -141,6 +146,8 @@ const MyComponent = () => {
 };
 ```
 
+`deviceMemory` values can be the approximate amount of device memory in gigabytes.
+
 This hook accepts an optional `initialMemoryStatus` object argument, which can be used to provide a `deviceMemory` state value when the user's browser does not support the relevant [DeviceMemory API](https://github.com/w3c/device-memory). Passing an initial value can also prove useful for server-side rendering, where the developer can pass a server [Device-Memory Client Hint](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints#save-data) to detect the memory capacity of the user's device.
 
 ```js
@@ -163,7 +170,7 @@ import { useNetworkStatus } from 'react-adaptive-hooks/network';
 const Full = lazy(() => import(/* webpackChunkName: "full" */ './Full.js'));
 const Light = lazy(() => import(/* webpackChunkName: "light" */ './Light.js'));
 
-function MyComponent() {
+const MyComponent = () => {
   const { effectiveConnectionType } = useNetworkStatus();
   return (
     <div>
@@ -172,7 +179,7 @@ function MyComponent() {
       </Suspense>
     </div>
   );
-}
+};
 
 export default MyComponent;
 ```
@@ -182,7 +189,7 @@ Light.js:
 import React from 'react';
 
 const Light = ({ imageUrl, ...rest }) => (
-  <img src={imageUrl} alt='product' {...rest} />
+  <img src={imageUrl} {...rest} />
 );
 
 export default Light;
@@ -212,31 +219,29 @@ const Component = React.lazy(() => {
 
   let module;
   switch (effectiveType) {
-    case "3g":
-      module = import(/* webpackChunkName: "light" */ "./Light.js");
+    case '3g':
+      module = import(/* webpackChunkName: "light" */ './Light.js');
       break;
-    case "4g":
-      module = import(/* webpackChunkName: "full" */ "./Full.js");
+    case '4g':
+      module = import(/* webpackChunkName: "full" */ './Full.js');
       break;
     default:
-      module = import(/* webpackChunkName: "full" */ "./Full.js");
+      module = import(/* webpackChunkName: "full" */ './Full.js');
       break;
   }
 
   return module;
 });
 
-function App() {
+const App = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <Suspense fallback={<div>Loading...</div>}>
-          <Component />
-        </Suspense>
-      </header>
+    <div className='App'>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Component />
+      </Suspense>
     </div>
   );
-}
+};
 
 export default App;
 ```
@@ -280,7 +285,7 @@ export default App;
 
 * [Memory considerate loading](https://github.com/GoogleChromeLabs/adaptive-loading/tree/master/cra-memory-considerate-loading) with create-react-app ([Live](https://adaptive-loading.web.app/cra-memory-considerate-loading/))
 * [Memory considerate loading (SketchFab version)](https://github.com/GoogleChromeLabs/adaptive-loading/tree/master/cra-memory-considerate-loading-sketchfab) with create-react-app ([Live](https://adaptive-loading.web.app/cra-memory-considerate-loading-sketchfab/))
-* [Memory-considerate animation-toggling](https://github.com/GoogleChromeLabs/adaptive-loading/tree/master/cna-memory-considerate-animation) with create-next-app ([Live](https://cna-memory-animation.firebaseapp.com/))
+* [Memory-considerate animation-toggling](https://github.com/GoogleChromeLabs/adaptive-loading/tree/master/cna-memory-considerate-animation) with create-next-app ([Live](https://adaptive-loading.web.app/cna-memory-considerate-animation/))
 
 * [React Dixie Mesh - memory considerate loading](https://github.com/GoogleChromeLabs/adaptive-loading/tree/master/react-dixie-memory-considerate-loading) ([Live](https://adaptive-loading.web.app/react-dixie-memory-considerate-loading/))