update readme

Add motivations and more examples.

Author: bryanmylee

README.md

@@ -14,21 +14,21 @@ A **writable** derived store for objects and arrays!
 ### Objects are `keyed`
 
 ```js
-const name = writable({ first: 'Rich', last: 'Harris' });
-const firstName = keyed(name, 'first');
+const name = writable({ first: "Rich", last: "Harris" });
+const firstName = keyed(name, "first");
 
-$firstName = 'Bryan';
+$firstName = "Bryan";
 
 console.log($name); // { first: 'Bryan', last: 'Harris' };
 ```
 
 ### Arrays are `indexed`
 
 ```js
-const history = writable(['one', 'two', 'three']);
+const history = writable(["one", "two", "three"]);
 const previousEdit = indexed(history, 1);
 
-$previousEdit = 'four';
+$previousEdit = "four";
 
 console.log($history); // ['one', 'four', 'three'];
 ```
@@ -55,5 +55,75 @@ Due to Typescript limitations, if the parent store is nullable, specify the full
 
 ```ts
 const name = writable<Name | undefined>(undefined);
-const firstName = keyed<Name>(name, 'first');
+const firstName = keyed<Name>(name, "first");
+```
+
+### Nested objects
+
+`keyed` and `indexed` only derive one depth of properties or elements. To access nested objects, nest multiple `keyed` or `indexed` calls.
+
+```js
+const email = keyed(indexed(keyed(settings, "profiles"), 0), "email");
+```
+
+## Motivations
+
+We usually read and write properties of an object store with [auto-subscriptions](https://svelte.dev/tutorial/auto-subscriptions).
+
+```svelte
+<input bind:value={$name.first}/>
+```
+
+However, auto-subscriptions are isolated to a Svelte component. `svelte-keyed` aims to solve several common limitations listed below.
+
+### Context stores
+
+Often, we want to set a property or element of a store into component context, then allow child components to read / write to the property.
+
+```svelte
+<!-- Settings.svelte -->
+<script>
+  setContext('profileSettings', keyed(settings, 'profile'));
+</script>
+
+<GeneralSettings />
+<ProfileSettings />
+```
+
+```svelte
+<!-- ProfileSettings.svelte -->
+<script>
+  const profileSettings = getContext('profileSettings');
+</script>
+
+<input type="text" bind:value={$profileSettings.username} />
+```
+
+### Helper functions
+
+One important method to reduce clutter on your component is to extract functionality into external helper functions. `svelte-keyed` allows you to create derived `Writable` stores that can be passed into or returned from helper functions.
+
+```svelte
+<!-- Settings.svelte -->
+<script>
+  const stats = writable({ userClicks: 0, userTaps: 0 });
+  const clicks = keyed(stats, 'userClicks');
+</script>
+
+<div use:trackClicks={clicks} />
+<input use:trackClicks={clicks} />
+```
+
+```js
+export const trackClicks = (node, clicks) => {
+  const listen = () => {
+    clicks.update(($clicks) => $clicks + 1);
+  };
+  node.addEventListener("click", listen);
+  return {
+    destroy() {
+      node.removeEventListener("click", listen);
+    },
+  };
+};
 ```