From 8700bbbd8fb0ce7c264975faad4d5710fc8b12ff Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 01:32:00 +0900
Subject: [PATCH 1/7] Modify to divide theme-provider.tsx

---
 playground/src/context/theme-consumer.tsx | 12 +++++++++
 playground/src/context/theme-context.ts   | 24 ++++++++++++++++++
 playground/src/context/theme-provider.tsx | 31 +++--------------------
 3 files changed, 39 insertions(+), 28 deletions(-)
 create mode 100644 playground/src/context/theme-consumer.tsx
 create mode 100644 playground/src/context/theme-context.ts

diff --git a/playground/src/context/theme-consumer.tsx b/playground/src/context/theme-consumer.tsx
new file mode 100644
index 0000000..057b30b
--- /dev/null
+++ b/playground/src/context/theme-consumer.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import ThemeContext from './theme-context';
+
+interface ThemedButtonProps {}
+
+export default function ToggleThemeButton(props: ThemedButtonProps) {
+  return (
+    <ThemeContext.Consumer>
+      {({ theme, toggleTheme }) => <button style={theme} onClick={toggleTheme} {...props} />}
+    </ThemeContext.Consumer>
+  );
+}
diff --git a/playground/src/context/theme-context.ts b/playground/src/context/theme-context.ts
new file mode 100644
index 0000000..18561b1
--- /dev/null
+++ b/playground/src/context/theme-context.ts
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+export type Theme = React.CSSProperties;
+
+type Themes = {
+  dark: Theme;
+  light: Theme;
+};
+
+export const themes: Themes = {
+  dark: {
+    color: 'black',
+    backgroundColor: 'white',
+  },
+  light: {
+    color: 'white',
+    backgroundColor: 'black',
+  },
+};
+
+export type ThemeContextProps = { theme: Theme; toggleTheme?: () => void };
+const ThemeContext = React.createContext<ThemeContextProps>({ theme: themes.light });
+
+export default ThemeContext;
diff --git a/playground/src/context/theme-provider.tsx b/playground/src/context/theme-provider.tsx
index a9ac26c..57dc73f 100644
--- a/playground/src/context/theme-provider.tsx
+++ b/playground/src/context/theme-provider.tsx
@@ -1,23 +1,9 @@
 import React from 'react';
+import ThemeContext, { themes, Theme } from './theme-context';
+import ToggleThemeButton from './theme-consumer';
 
-// Context
-const themes = {
-  dark: {
-    color: 'black',
-    backgroundColor: 'white',
-  } as React.CSSProperties,
-  light: {
-    color: 'white',
-    backgroundColor: 'black',
-  } as React.CSSProperties,
-};
-
-type Theme = { theme: React.CSSProperties; toggleTheme?: () => void };
-const ThemeContext = React.createContext<Theme>({ theme: themes.light });
-
-// Provider
 interface State {
-  theme: Theme['theme'];
+  theme: Theme;
 }
 export class App extends React.Component<{}, State> {
   readonly state: State = { theme: themes.light };
@@ -38,14 +24,3 @@ export class App extends React.Component<{}, State> {
     );
   }
 }
-
-// Consumer
-interface ThemedButtonProps {}
-
-function ToggleThemeButton(props: ThemedButtonProps) {
-  return (
-    <ThemeContext.Consumer>
-      {({ theme, toggleTheme }) => <button style={theme} onClick={toggleTheme} {...props} />}
-    </ThemeContext.Consumer>
-  );
-}

From 71f4e9408f4238174ab8856e6ebc0f0f78bf4bf1 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 01:41:16 +0900
Subject: [PATCH 2/7] Add the example for useContext hook

---
 playground/src/hooks/use-theme-context.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 playground/src/hooks/use-theme-context.tsx

diff --git a/playground/src/hooks/use-theme-context.tsx b/playground/src/hooks/use-theme-context.tsx
new file mode 100644
index 0000000..902195f
--- /dev/null
+++ b/playground/src/hooks/use-theme-context.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import ThemeContext from '../context/theme-context';
+
+interface ThemedButtonProps {}
+
+export default function ThemeToggleButton(props: ThemedButtonProps) {
+  const { theme, toggleTheme } = React.useContext(ThemeContext);
+  return (
+    <button onClick={toggleTheme} style={theme} >
+      Toggle Theme
+    </button>
+  );
+}

From 63a83620766b103d0f3fbd0211a0472f54a36ba7 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 01:50:00 +0900
Subject: [PATCH 3/7] Modify to update README_SOURCE

---
 README_SOURCE.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/README_SOURCE.md b/README_SOURCE.md
index fa2a059..47476fe 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -320,6 +320,14 @@ Hook for state management like Redux in a function component.
 
 [⇧ back to top](#table-of-contents)
 
+#### - useContext
+
+> https://reactjs.org/docs/hooks-reference.html#usecontext
+
+::codeblock='playground/src/hooks/use-theme-context.tsx'::
+
+[⇧ back to top](#table-of-contents)
+
 ---
 
 # Redux

From 3a7ddcd3c488bd2878f2e4c41144fdd845a54175 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 01:50:35 +0900
Subject: [PATCH 4/7] Modify to generate new README.md

---
 README.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/README.md b/README.md
index 173ab24..b10e14d 100644
--- a/README.md
+++ b/README.md
@@ -826,6 +826,29 @@ export default Counter;
 
 [⇧ back to top](#table-of-contents)
 
+#### - useContext
+
+> https://reactjs.org/docs/hooks-reference.html#usecontext
+
+```tsx
+import * as React from 'react';
+import ThemeContext from '../context/theme-context';
+
+interface ThemedButtonProps {}
+
+export default function ThemeToggleButton(props: ThemedButtonProps) {
+  const { theme, toggleTheme } = React.useContext(ThemeContext);
+  return (
+    <button onClick={toggleTheme} style={theme} >
+      Toggle Theme
+    </button>
+  );
+}
+
+```
+
+[⇧ back to top](#table-of-contents)
+
 ---
 
 # Redux

From 76c34aded0add596cf23c6c1e8f62997d75eb8bb Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 04:22:03 +0900
Subject: [PATCH 5/7] Modify to rename App => ThemeProvider

---
 playground/src/context/theme-provider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playground/src/context/theme-provider.tsx b/playground/src/context/theme-provider.tsx
index 57dc73f..a4abb82 100644
--- a/playground/src/context/theme-provider.tsx
+++ b/playground/src/context/theme-provider.tsx
@@ -5,7 +5,7 @@ import ToggleThemeButton from './theme-consumer';
 interface State {
   theme: Theme;
 }
-export class App extends React.Component<{}, State> {
+export class ThemeProvider extends React.Component<{}, State> {
   readonly state: State = { theme: themes.light };
 
   toggleTheme = () => {

From b4a29bbabfa8694085253fba3fdcfa326373ac2e Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 04:25:04 +0900
Subject: [PATCH 6/7] Modify to use 'type' instead of 'interface' when we
 declare Props type definition

---
 playground/src/context/theme-consumer.tsx  | 4 ++--
 playground/src/hooks/use-theme-context.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/playground/src/context/theme-consumer.tsx b/playground/src/context/theme-consumer.tsx
index 057b30b..5ddd73d 100644
--- a/playground/src/context/theme-consumer.tsx
+++ b/playground/src/context/theme-consumer.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import ThemeContext from './theme-context';
 
-interface ThemedButtonProps {}
+type Props = {};
 
-export default function ToggleThemeButton(props: ThemedButtonProps) {
+export default function ToggleThemeButton(props: Props) {
   return (
     <ThemeContext.Consumer>
       {({ theme, toggleTheme }) => <button style={theme} onClick={toggleTheme} {...props} />}
diff --git a/playground/src/hooks/use-theme-context.tsx b/playground/src/hooks/use-theme-context.tsx
index 902195f..d4fced9 100644
--- a/playground/src/hooks/use-theme-context.tsx
+++ b/playground/src/hooks/use-theme-context.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import ThemeContext from '../context/theme-context';
 
-interface ThemedButtonProps {}
+type Props = {};
 
-export default function ThemeToggleButton(props: ThemedButtonProps) {
+export default function ThemeToggleButton(props: Props) {
   const { theme, toggleTheme } = React.useContext(ThemeContext);
   return (
     <button onClick={toggleTheme} style={theme} >

From f871c41cd51b958737f074d9362965ac2f30a5af Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 04:25:49 +0900
Subject: [PATCH 7/7] Modify to generate new README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b10e14d..e5986b8 100644
--- a/README.md
+++ b/README.md
@@ -834,9 +834,9 @@ export default Counter;
 import * as React from 'react';
 import ThemeContext from '../context/theme-context';
 
-interface ThemedButtonProps {}
+type Props = {};
 
-export default function ThemeToggleButton(props: ThemedButtonProps) {
+export default function ThemeToggleButton(props: Props) {
   const { theme, toggleTheme } = React.useContext(ThemeContext);
   return (
     <button onClick={toggleTheme} style={theme} >