Add the example for useContext (#127)

resolve #120 (comment)

- divide `playground/src/context/theme-provider.tsx` to `theme-provider.tsx`, `theme-consumer.tsx` and  `theme-context.ts`.
- add the example for `useContext` to `playground/src/hooks/use-theme-context.tsx`.

Author: sosukesuzuki

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';
+
+type Props = {};
+
+export default function ThemeToggleButton(props: Props) {
+  const { theme, toggleTheme } = React.useContext(ThemeContext);
+  return (
+    <button onClick={toggleTheme} style={theme} >
+      Toggle Theme
+    </button>
+  );
+}
+
+```
+
+[⇧ back to top](#table-of-contents)
+
 ---
 
 # Redux

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

playground/src/context/theme-consumer.tsx

@@ -0,0 +1,12 @@
+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>
+  );
+}

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;

playground/src/context/theme-provider.tsx

@@ -1,25 +1,11 @@
 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> {
+export class ThemeProvider extends React.Component<{}, State> {
   readonly state: State = { theme: themes.light };
 
   toggleTheme = () => {
@@ -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>
-  );
-}

playground/src/hooks/use-theme-context.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import ThemeContext from '../context/theme-context';
+
+type Props = {};
+
+export default function ThemeToggleButton(props: Props) {
+  const { theme, toggleTheme } = React.useContext(ThemeContext);
+  return (
+    <button onClick={toggleTheme} style={theme} >
+      Toggle Theme
+    </button>
+  );
+}