From 5f7e10d09936d4bc42d69b02bd38711537a67136 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 04:49:40 +0900
Subject: [PATCH 1/8] Modify to add Context API examples to README_SOURCe

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

diff --git a/README_SOURCE.md b/README_SOURCE.md
index b4d575d..6e7af6b 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -309,6 +309,30 @@ const mapDispatchToProps = (dispatch: Dispatch<ActionType>) => ({
 
 [⇧ back to top](#table-of-contents)
 
+## Context API
+
+> https://reactjs.org/docs/context.html
+
+#### ThemeContext
+
+::codeblock='playground/src/context/theme-context.ts'::
+
+[⇧ back to top](#table-of-contents)
+
+#### ThemeProvider
+
+::codeblock='playground/src/context/theme-provider.tsx'::
+
+[⇧ back to top](#table-of-contents)
+
+#### ThemeConsumer
+
+::codeblock='playground/src/context/theme-consumer.tsx'::
+
+[Implementation with Hooks](#hooks)
+
+[⇧ back to top](#table-of-contents)
+
 ## Hooks
 
 > https://reactjs.org/docs/hooks-intro.html

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

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

diff --git a/README.md b/README.md
index f5b8691..9599448 100644
--- a/README.md
+++ b/README.md
@@ -766,6 +766,98 @@ export default () => (
 
 [⇧ back to top](#table-of-contents)
 
+## Context API
+
+> https://reactjs.org/docs/context.html
+
+#### ThemeContext
+
+```tsx
+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;
+
+```
+
+[⇧ back to top](#table-of-contents)
+
+#### ThemeProvider
+
+```tsx
+import React from 'react';
+import ThemeContext, { themes, Theme } from './theme-context';
+import ToggleThemeButton from './theme-consumer';
+
+interface State {
+  theme: Theme;
+}
+export class ThemeProvider extends React.Component<{}, State> {
+  readonly state: State = { theme: themes.light };
+
+  toggleTheme = () => {
+    this.setState(state => ({
+      theme: state.theme === themes.light ? themes.dark : themes.light,
+    }));
+  }
+
+  render() {
+    const { theme } = this.state;
+    const { toggleTheme } = this;
+    return (
+      <ThemeContext.Provider value={{ theme, toggleTheme }}>
+        <ToggleThemeButton />
+      </ThemeContext.Provider>
+    );
+  }
+}
+
+```
+
+[⇧ back to top](#table-of-contents)
+
+#### ThemeConsumer
+
+```tsx
+import * as React from 'react';
+import ThemeContext from './theme-context';
+
+type Props = {};
+
+export default function ToggleThemeButton(props: Props) {
+  return (
+    <ThemeContext.Consumer>
+      {({ theme, toggleTheme }) => <button style={theme} onClick={toggleTheme} {...props} />}
+    </ThemeContext.Consumer>
+  );
+}
+
+```
+
+[Implementation with Hooks](#hooks)
+
+[⇧ back to top](#table-of-contents)
+
 ## Hooks
 
 > https://reactjs.org/docs/hooks-intro.html

From 4a08acccee814de8dae35977395cfaede53aeaa8 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 04:55:45 +0900
Subject: [PATCH 3/8] Modify to add the link ot table of content

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

diff --git a/README_SOURCE.md b/README_SOURCE.md
index 6e7af6b..04fe051 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -52,6 +52,7 @@ This gives you the power to prioritize our work and support the project contribu
   - [Render Props](#render-props) 🌟 __NEW__
   - [Higher-Order Components](#higher-order-components) 📝 __UPDATED__
   - [Redux Connected Components](#redux-connected-components)
+  - [Context API](#context-api)
   - [Hooks](#hooks)
 - [Redux](#redux)
   - [Action Creators](#action-creators) 📝 __UPDATED__

From 79b04cf6cbcd81f410fc5df8d864211433252110 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 04:56:31 +0900
Subject: [PATCH 4/8] Modify to fix link for useContext

---
 README_SOURCE.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README_SOURCE.md b/README_SOURCE.md
index 04fe051..a4d15aa 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -330,7 +330,7 @@ const mapDispatchToProps = (dispatch: Dispatch<ActionType>) => ({
 
 ::codeblock='playground/src/context/theme-consumer.tsx'::
 
-[Implementation with Hooks](#hooks)
+[Implementation with Hooks](#--usecontext)
 
 [⇧ back to top](#table-of-contents)
 

From a7c1ac7de9422d6e5af1deac0105257490d699a5 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 04:57:00 +0900
Subject: [PATCH 5/8] Modify to generate new README

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9599448..ccc64ef 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,7 @@ This gives you the power to prioritize our work and support the project contribu
   - [Render Props](#render-props) 🌟 __NEW__
   - [Higher-Order Components](#higher-order-components) 📝 __UPDATED__
   - [Redux Connected Components](#redux-connected-components)
+  - [Context API](#context-api)
   - [Hooks](#hooks)
 - [Redux](#redux)
   - [Action Creators](#action-creators) 📝 __UPDATED__
@@ -854,7 +855,7 @@ export default function ToggleThemeButton(props: Props) {
 
 ```
 
-[Implementation with Hooks](#hooks)
+[Implementation with Hooks](#--usecontext)
 
 [⇧ back to top](#table-of-contents)
 

From e1c1fd40bac5979be7d4a15a56c88b99d7adb106 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 04:58:01 +0900
Subject: [PATCH 6/8] Modify to remove 'API'

---
 README.md        | 2 +-
 README_SOURCE.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index ccc64ef..c97b47f 100644
--- a/README.md
+++ b/README.md
@@ -767,7 +767,7 @@ export default () => (
 
 [⇧ back to top](#table-of-contents)
 
-## Context API
+## Context
 
 > https://reactjs.org/docs/context.html
 
diff --git a/README_SOURCE.md b/README_SOURCE.md
index a4d15aa..1ce503a 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -310,7 +310,7 @@ const mapDispatchToProps = (dispatch: Dispatch<ActionType>) => ({
 
 [⇧ back to top](#table-of-contents)
 
-## Context API
+## Context
 
 > https://reactjs.org/docs/context.html
 

From aa1c0cec64c0af792871bfb9e4aa95d30497eecf Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 04:59:24 +0900
Subject: [PATCH 7/8] Modify to remove 'API' from tabel of content

---
 README_SOURCE.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README_SOURCE.md b/README_SOURCE.md
index 1ce503a..b3d4013 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -52,7 +52,7 @@ This gives you the power to prioritize our work and support the project contribu
   - [Render Props](#render-props) 🌟 __NEW__
   - [Higher-Order Components](#higher-order-components) 📝 __UPDATED__
   - [Redux Connected Components](#redux-connected-components)
-  - [Context API](#context-api)
+  - [Context](#context)
   - [Hooks](#hooks)
 - [Redux](#redux)
   - [Action Creators](#action-creators) 📝 __UPDATED__

From 943f6d3f5581b27295effa1355a441a0cd38b26b Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 05:00:27 +0900
Subject: [PATCH 8/8] Modify to generate new REAMDME.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c97b47f..71f1b46 100644
--- a/README.md
+++ b/README.md
@@ -52,7 +52,7 @@ This gives you the power to prioritize our work and support the project contribu
   - [Render Props](#render-props) 🌟 __NEW__
   - [Higher-Order Components](#higher-order-components) 📝 __UPDATED__
   - [Redux Connected Components](#redux-connected-components)
-  - [Context API](#context-api)
+  - [Context](#context)
   - [Hooks](#hooks)
 - [Redux](#redux)
   - [Action Creators](#action-creators) 📝 __UPDATED__