Updated examples and readme

Author: techbech

README.md

@@ -13,31 +13,39 @@ npm install --save react-context-session
 import React from "react";
 import {ProvideSession, useSession} from "react-context-session";
 
+// Arbitrary session data structure
 type MySessionType = {
   x: number;
   y: number;
   z: string;
 }
 
+// Create type strict hook alias
 const useMySession = useSession<MySessionType>();
 
+// Read usage
 function MyCalculation() {
   const [{x,y}] = useMySession(["x", "y"]);
 
   return <p>{x} + {y} = {x + y}</p>;
 }
 
+// Read usage
 function MyMessage() {
   const [{z}] = useMySession(["z"]);
 
   return <p>{z}</p>;
 }
 
+// Write usage
 function MyButton() {
   const [, setValue] = useMySession();
   return <button onClick={() => setValue("z", "My new string")}>Click me</button>;
 }
 
+// Setup session in the root of your application, or at least higher in
+// the component hierarchy than the component using the `useSession` hook.
+// * Mandatory: Set default session values in the data prop
 function MyApp() {
   return (
     <ProvideSession data={{x: 5, y: 10, z: "My string"}}>
@@ -47,10 +55,35 @@ function MyApp() {
     </ProvideSession>
   )
 }
+```
 
-export default MyApp;
-
+## Multiple contexts
+If your app has different sections where the session data should to be shared between, you can set up different session providers
+for each section as following.
+```tsx
+function AdminSection() {
+  return (
+    <ProvideSession data={...} context={"admin"}>...</ProvideSession>
+  )
+}
+function UserSection() {
+  return (
+    <ProvideSession data={...} context={"user"}>...</ProvideSession>
+  )
+}
+```
 
+## Save session data to storage
+react-context-session has no support for saving to storage, but do instead have a callback function for every time the data changes.
+Please notice that the callback only calls with updated data to its context.
+```tsx
+function MyProvider() {
+  return (
+    <ProvideSession data={...} onChange={data => {
+        console.log("Your storage implementation here", data);
+    }}>...</ProvideSession>
+  )
+}
 ```
 
 ## License

example/src/App.tsx

@@ -45,7 +45,10 @@ export function Child({ property }: { property: keyof Test }) {
     <div className={'card'}>
       <h3>{`Child (${property.toUpperCase()})`}</h3>
       <p className={'last-render'}>
-        Last <u>effect</u> at: {updatedAt.getTime()}
+        Last <u>render</u> at: {new Date().getTime()}
+      </p>
+      <p className={'last-effect'}>
+        Last <u>effect</u> on <b>{property.toUpperCase()}</b> at: {updatedAt.getTime()}
       </p>
       <div className={'row'}>
         <div className={'states'}>
@@ -76,6 +79,9 @@ export function Parent() {
     <div className={'parent'}>
       <div className={'card'}>
         <h3>Parent</h3>
+        <p className={'last-render'}>
+          Last <u>render</u> at: {new Date().getTime()}
+        </p>
         <div className={'row'}>
           <div className={'states'}>
             <p>
@@ -139,9 +145,6 @@ const App = () => {
   return (
     <div>
       <h1>react-context-session</h1>
-      <p className={'sub-headline'}>
-        Multiple session contexts, render optimized and type strict
-      </p>
       <div className={'container'}>
         <div className={'context'}>
           <ProvideSession

example/src/getting-started.tsx

@@ -2,39 +2,40 @@ import React from 'react'
 import { ProvideSession, useSession } from 'react-context-session'
 
 type MySessionType = {
-  x: number
-  y: number
-  z: string
+  x: number;
+  y: number;
+  z: string;
 }
 
-const useMySession = useSession<MySessionType>()
+// Create type strict hook alias
+const useMySession = useSession<MySessionType>();
 
+// Read usage
 function MyCalculation() {
-  const [{ x, y }] = useMySession(['x', 'y'])
+  const [{x,y}] = useMySession(["x", "y"]);
 
-  return (
-    <p>
-      {x} + {y} = {x + y}
-    </p>
-  )
+  return <p>{x} + {y} = {x + y}</p>;
 }
 
+// Read usage
 function MyMessage() {
-  const [{ z }] = useMySession(['z'])
+  const [{z}] = useMySession(["z"]);
 
-  return <p>{z}</p>
+  return <p>{z}</p>;
 }
 
+// Write usage
 function MyButton() {
-  const [, setValue] = useMySession()
-  return (
-    <button onClick={() => setValue('z', 'My new string')}>Click me</button>
-  )
+  const [, setValue] = useMySession();
+  return <button onClick={() => setValue("z", "My new string")}>Click me</button>;
 }
 
+// Setup session in the root of your application, or at least higher in
+// the component hierarchy than the component using the `useSession` hook.
+// * Mandatory: Set default session values in the data prop
 function MyApp() {
   return (
-    <ProvideSession data={{ x: 5, y: 10, z: 'My string' }}>
+    <ProvideSession data={{x: 5, y: 10, z: "My string"}}>
       <MyCalculation />
       <MyMessage />
       <MyButton />

example/src/index.tsx

@@ -2,7 +2,7 @@ import './index.css'
 
 import React from 'react'
 import ReactDOM from 'react-dom'
-//import App from './App'
-import MyApp from './getting-started'
+import App from './App'
+//import MyApp from './getting-started'
 
-ReactDOM.render(<MyApp />, document.getElementById('root'))
+ReactDOM.render(<App />, document.getElementById('root'))