From 36189a1674ba29c396c2536fdee1d5290cc3c152 Mon Sep 17 00:00:00 2001
From: Piotr Witek <piotrek.witek@gmail.com>
Date: Thu, 24 Jan 2019 14:42:50 +0100
Subject: [PATCH 01/20] Added `React.ComponentProps<typeof Component>

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

diff --git a/README.md b/README.md
index 6cd28f3..5f02174 100644
--- a/README.md
+++ b/README.md
@@ -109,16 +109,20 @@ npm i -D @types/react @types/react-dom @types/react-redux
 #### `React.FunctionComponent<P>` or `React.FC<P>`
 Type representing a functional component
 ```tsx
-const MyComponent: React.FC<MyComponentProps> = ...
+const MyComponent: React.FC<Props> = ...
 ```
-[⇧ back to top](#table-of-contents)
 
 #### `React.Component<P, S>`
 Type representing a class component
 ```tsx
-class MyComponent extends React.Component<MyComponentProps, State> { ...
+class MyComponent extends React.Component<Props, State> { ...
+```
+
+#### `React.ComponentProps<typeof Component>
+Gets component Props type. You don't no need to export Props from your component ever!
+```tsx
+type MyComponentProps = React.ComponentProps<typeof MyComponent>;
 ```
-[⇧ back to top](#table-of-contents)
 
 #### `React.ComponentType<P>`
 Type representing union type of (FC | Component)
@@ -127,14 +131,12 @@ const withState = <P extends WrappedComponentProps>(
   WrappedComponent: React.ComponentType<P>,
 ) => { ...
 ```
-[⇧ back to top](#table-of-contents)
 
 #### `React.ReactElement<P>` or `JSX.Element`
 Type representing a concept of React Element - representation of a native DOM component (e.g. `<div />`), or a user-defined composite component (e.g. `<MyComponent />`)
 ```tsx
 const elementOnly: React.ReactElement = <div /> || <MyComponent />;
 ```
-[⇧ back to top](#table-of-contents)
 
 #### `React.ReactNode`
 Type representing any possible type of React node (basically ReactElement (including Fragments and Portals) + primitive JS types)
@@ -142,7 +144,6 @@ Type representing any possible type of React node (basically ReactElement (inclu
 const elementOrPrimitive: React.ReactNode = 'string' || 0 || false || null || undefined || <div /> || <MyComponent />;
 const Component = ({ children: React.ReactNode }) => ...
 ```
-[⇧ back to top](#table-of-contents)
 
 #### `React.CSSProperties`
 Type representing style object in JSX (usefull for css-in-js styles)
@@ -150,7 +151,6 @@ Type representing style object in JSX (usefull for css-in-js styles)
 const styles: React.CSSProperties = { flexDirection: 'row', ...
 const element = <div style={styles} ...
 ```
-[⇧ back to top](#table-of-contents)
 
 #### `React.ReactEventHandler<E>`
 Type representing generic event handler
@@ -159,7 +159,6 @@ const handleChange: React.ReactEventHandler<HTMLInputElement> = (ev) => { ... }
 
 <input onChange={handleChange} ... />
 ```
-[⇧ back to top](#table-of-contents)
 
 #### `React.MouseEvent<E>` | `React.KeyboardEvent<E>` | `React.TouchEvent<E>` etc...
 Type representing more specific event handler
@@ -168,6 +167,7 @@ const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }
 
 <div onMouseMove={handleChange} ... />
 ```
+
 [⇧ back to top](#table-of-contents)
 
 ---
diff --git a/README_SOURCE.md b/README_SOURCE.md
index 1db0fdc..6913c41 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -109,16 +109,20 @@ npm i -D @types/react @types/react-dom @types/react-redux
 #### `React.FunctionComponent<P>` or `React.FC<P>`
 Type representing a functional component
 ```tsx
-const MyComponent: React.FC<MyComponentProps> = ...
+const MyComponent: React.FC<Props> = ...
 ```
-[⇧ back to top](#table-of-contents)
 
 #### `React.Component<P, S>`
 Type representing a class component
 ```tsx
-class MyComponent extends React.Component<MyComponentProps, State> { ...
+class MyComponent extends React.Component<Props, State> { ...
+```
+
+#### `React.ComponentProps<typeof Component>
+Gets component Props type. You don't no need to export Props from your component ever!
+```tsx
+type MyComponentProps = React.ComponentProps<typeof MyComponent>;
 ```
-[⇧ back to top](#table-of-contents)
 
 #### `React.ComponentType<P>`
 Type representing union type of (FC | Component)
@@ -127,14 +131,12 @@ const withState = <P extends WrappedComponentProps>(
   WrappedComponent: React.ComponentType<P>,
 ) => { ...
 ```
-[⇧ back to top](#table-of-contents)
 
 #### `React.ReactElement<P>` or `JSX.Element`
 Type representing a concept of React Element - representation of a native DOM component (e.g. `<div />`), or a user-defined composite component (e.g. `<MyComponent />`)
 ```tsx
 const elementOnly: React.ReactElement = <div /> || <MyComponent />;
 ```
-[⇧ back to top](#table-of-contents)
 
 #### `React.ReactNode`
 Type representing any possible type of React node (basically ReactElement (including Fragments and Portals) + primitive JS types)
@@ -142,7 +144,6 @@ Type representing any possible type of React node (basically ReactElement (inclu
 const elementOrPrimitive: React.ReactNode = 'string' || 0 || false || null || undefined || <div /> || <MyComponent />;
 const Component = ({ children: React.ReactNode }) => ...
 ```
-[⇧ back to top](#table-of-contents)
 
 #### `React.CSSProperties`
 Type representing style object in JSX (usefull for css-in-js styles)
@@ -150,7 +151,6 @@ Type representing style object in JSX (usefull for css-in-js styles)
 const styles: React.CSSProperties = { flexDirection: 'row', ...
 const element = <div style={styles} ...
 ```
-[⇧ back to top](#table-of-contents)
 
 #### `React.ReactEventHandler<E>`
 Type representing generic event handler
@@ -159,7 +159,6 @@ const handleChange: React.ReactEventHandler<HTMLInputElement> = (ev) => { ... }
 
 <input onChange={handleChange} ... />
 ```
-[⇧ back to top](#table-of-contents)
 
 #### `React.MouseEvent<E>` | `React.KeyboardEvent<E>` | `React.TouchEvent<E>` etc...
 Type representing more specific event handler
@@ -168,6 +167,7 @@ const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }
 
 <div onMouseMove={handleChange} ... />
 ```
+
 [⇧ back to top](#table-of-contents)
 
 ---

From 533ea05697e008069ecefc54e692f91b8e130aee Mon Sep 17 00:00:00 2001
From: Piotr Witek <piotrek.witek@gmail.com>
Date: Thu, 24 Jan 2019 14:44:45 +0100
Subject: [PATCH 02/20] Added missing quote

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

diff --git a/README.md b/README.md
index 5f02174..173ab24 100644
--- a/README.md
+++ b/README.md
@@ -118,7 +118,7 @@ Type representing a class component
 class MyComponent extends React.Component<Props, State> { ...
 ```
 
-#### `React.ComponentProps<typeof Component>
+#### `React.ComponentProps<typeof Component>`
 Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;
diff --git a/README_SOURCE.md b/README_SOURCE.md
index 6913c41..fa2a059 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -118,7 +118,7 @@ Type representing a class component
 class MyComponent extends React.Component<Props, State> { ...
 ```
 
-#### `React.ComponentProps<typeof Component>
+#### `React.ComponentProps<typeof Component>`
 Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;

From 92c9a5ce03ad852e8421ddd55a4bca42375d5e45 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 04:34:06 +0900
Subject: [PATCH 03/20] Add the example for useContext (#127)

resolve https://github.com/piotrwitek/react-redux-typescript-guide/issues/120#issuecomment-457159038

- 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`.
---
 README.md                                  | 23 +++++++++++++++
 README_SOURCE.md                           |  8 ++++++
 playground/src/context/theme-consumer.tsx  | 12 ++++++++
 playground/src/context/theme-context.ts    | 24 ++++++++++++++++
 playground/src/context/theme-provider.tsx  | 33 +++-------------------
 playground/src/hooks/use-theme-context.tsx | 13 +++++++++
 6 files changed, 84 insertions(+), 29 deletions(-)
 create mode 100644 playground/src/context/theme-consumer.tsx
 create mode 100644 playground/src/context/theme-context.ts
 create mode 100644 playground/src/hooks/use-theme-context.tsx

diff --git a/README.md b/README.md
index 173ab24..e5986b8 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';
+
+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
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
diff --git a/playground/src/context/theme-consumer.tsx b/playground/src/context/theme-consumer.tsx
new file mode 100644
index 0000000..5ddd73d
--- /dev/null
+++ b/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>
+  );
+}
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..a4abb82 100644
--- a/playground/src/context/theme-provider.tsx
+++ b/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>
-  );
-}
diff --git a/playground/src/hooks/use-theme-context.tsx b/playground/src/hooks/use-theme-context.tsx
new file mode 100644
index 0000000..d4fced9
--- /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';
+
+type Props = {};
+
+export default function ThemeToggleButton(props: Props) {
+  const { theme, toggleTheme } = React.useContext(ThemeContext);
+  return (
+    <button onClick={toggleTheme} style={theme} >
+      Toggle Theme
+    </button>
+  );
+}

From 38ccf5567735bff920e0c3775adeb2856456b3b6 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 04:37:26 +0900
Subject: [PATCH 04/20] Add useState example (#128)

resolve #120
---
 README.md                          | 25 +++++++++++++++++++++++++
 README_SOURCE.md                   |  8 ++++++++
 playground/src/hooks/use-state.tsx | 15 +++++++++++++++
 3 files changed, 48 insertions(+)
 create mode 100644 playground/src/hooks/use-state.tsx

diff --git a/README.md b/README.md
index e5986b8..f5b8691 100644
--- a/README.md
+++ b/README.md
@@ -770,6 +770,31 @@ export default () => (
 
 > https://reactjs.org/docs/hooks-intro.html
 
+#### - useState
+
+> https://reactjs.org/docs/hooks-reference.html#usestate
+
+```tsx
+import * as React from 'react';
+
+type Props = { initialCount: number };
+
+export default function Counter({initialCount}: Props) {
+  const [count, setCount] = React.useState(initialCount);
+  return (
+    <>
+      Count: {count}
+      <button onClick={() => setCount(initialCount)}>Reset</button>
+      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
+      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
+    </>
+  );
+}
+
+```
+
+[⇧ back to top](#table-of-contents)
+
 #### - useReducer
 Hook for state management like Redux in a function component.
 
diff --git a/README_SOURCE.md b/README_SOURCE.md
index 47476fe..b4d575d 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -313,6 +313,14 @@ const mapDispatchToProps = (dispatch: Dispatch<ActionType>) => ({
 
 > https://reactjs.org/docs/hooks-intro.html
 
+#### - useState
+
+> https://reactjs.org/docs/hooks-reference.html#usestate
+
+::codeblock='playground/src/hooks/use-state.tsx'::
+
+[⇧ back to top](#table-of-contents)
+
 #### - useReducer
 Hook for state management like Redux in a function component.
 
diff --git a/playground/src/hooks/use-state.tsx b/playground/src/hooks/use-state.tsx
new file mode 100644
index 0000000..3a7413a
--- /dev/null
+++ b/playground/src/hooks/use-state.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+type Props = { initialCount: number };
+
+export default function Counter({initialCount}: Props) {
+  const [count, setCount] = React.useState(initialCount);
+  return (
+    <>
+      Count: {count}
+      <button onClick={() => setCount(initialCount)}>Reset</button>
+      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
+      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
+    </>
+  );
+}

From 446654f5ce8fb7a763ca6b1d14617d665ce6658d Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sun, 27 Jan 2019 06:11:00 +0900
Subject: [PATCH 05/20] Add examples for Context API (#129)

Add examples for Context API
---
 README.md        | 93 ++++++++++++++++++++++++++++++++++++++++++++++++
 README_SOURCE.md | 25 +++++++++++++
 2 files changed, 118 insertions(+)

diff --git a/README.md b/README.md
index f5b8691..71f1b46 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](#context)
   - [Hooks](#hooks)
 - [Redux](#redux)
   - [Action Creators](#action-creators) 📝 __UPDATED__
@@ -766,6 +767,98 @@ export default () => (
 
 [⇧ back to top](#table-of-contents)
 
+## Context
+
+> 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](#--usecontext)
+
+[⇧ back to top](#table-of-contents)
+
 ## Hooks
 
 > https://reactjs.org/docs/hooks-intro.html
diff --git a/README_SOURCE.md b/README_SOURCE.md
index b4d575d..b3d4013 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](#context)
   - [Hooks](#hooks)
 - [Redux](#redux)
   - [Action Creators](#action-creators) 📝 __UPDATED__
@@ -309,6 +310,30 @@ const mapDispatchToProps = (dispatch: Dispatch<ActionType>) => ({
 
 [⇧ back to top](#table-of-contents)
 
+## Context
+
+> 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](#--usecontext)
+
+[⇧ back to top](#table-of-contents)
+
 ## Hooks
 
 > https://reactjs.org/docs/hooks-intro.html

From cbe31d948bbef099522e42443ecddbe35685297c Mon Sep 17 00:00:00 2001
From: Arshad Kazmi <arshadkazmi42@gmail.com>
Date: Wed, 30 Jan 2019 07:57:40 +0530
Subject: [PATCH 06/20] Adds imports in module decleration

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

diff --git a/README.md b/README.md
index 71f1b46..eb9a306 100644
--- a/README.md
+++ b/README.md
@@ -73,6 +73,7 @@ This gives you the power to prioritize our work and support the project contribu
 - [Recipes](#recipes)
   - [Baseline tsconfig.json](#baseline-tsconfigjson)
   - [Default and Named Module Exports](#default-and-named-module-exports)
+  - [Imports in Module Decleration](#imports-in-module-decleration)
   - [Type Augmentation for npm libraries](#type-augmentation-for-npm-libraries)
   - [Override type-definitions for npm libraries](#override-type-definitions-for-npm-libraries)
 - [FAQ](#faq)
@@ -1606,6 +1607,18 @@ import Select from '@src/components/select';
 
 [⇧ back to top](#table-of-contents)
 
+### Imports in Module Decleration
+
+> When creating 3rd party modules declarations all the imports should be put inside the module decleration, otherwise it will be treated as augmentation and show error
+```ts
+declare module "react-custom-scrollbars" {
+    import * as React from "react";
+
+    export interface positionValues {
+    ...
+```
+[⇧ back to top](#table-of-contents)
+
 ### Type Augmentation for npm libraries
 Strategies to fix issues coming from external type-definitions files (*.d.ts)
 

From fa0d2747c85af10305fa9eb0be90d99ffe1df324 Mon Sep 17 00:00:00 2001
From: Arshad Kazmi <arshadkazmi42@gmail.com>
Date: Wed, 30 Jan 2019 08:10:22 +0530
Subject: [PATCH 07/20] README_SOURCE update and README generated using script

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

diff --git a/README_SOURCE.md b/README_SOURCE.md
index b3d4013..8be2686 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -73,6 +73,7 @@ This gives you the power to prioritize our work and support the project contribu
 - [Recipes](#recipes)
   - [Baseline tsconfig.json](#baseline-tsconfigjson)
   - [Default and Named Module Exports](#default-and-named-module-exports)
+  - [Imports in Module Decleration](#imports-in-module-decleration)
   - [Type Augmentation for npm libraries](#type-augmentation-for-npm-libraries)
   - [Override type-definitions for npm libraries](#override-type-definitions-for-npm-libraries)
 - [FAQ](#faq)
@@ -634,6 +635,18 @@ import Select from '@src/components/select';
 
 [⇧ back to top](#table-of-contents)
 
+### Imports in Module Decleration
+
+> When creating 3rd party modules declarations all the imports should be put inside the module decleration, otherwise it will be treated as augmentation and show error
+```ts
+declare module "react-custom-scrollbars" {
+    import * as React from "react";
+
+    export interface positionValues {
+    ...
+```
+[⇧ back to top](#table-of-contents)
+
 ### Type Augmentation for npm libraries
 Strategies to fix issues coming from external type-definitions files (*.d.ts)
 

From 23764a84388e2ccc102b2cca123cb130dbf5e52c Mon Sep 17 00:00:00 2001
From: Piotr Witek <piotrek.witek@gmail.com>
Date: Thu, 24 Jan 2019 14:42:50 +0100
Subject: [PATCH 08/20] Added `React.ComponentProps<typeof Component>

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

diff --git a/README.md b/README.md
index e15e01f..26b2f46 100644
--- a/README.md
+++ b/README.md
@@ -108,8 +108,8 @@ Type representing a class component
 class MyComponent extends React.Component<Props, State> { ...
 ```
 
-#### `React.ComponentProps<typeof Component>`
-Gets type of Component Props, so you don't need to export Props from your component ever! (Works for both FC and Class components)
+#### `React.ComponentProps<typeof Component>
+Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;
 ```
diff --git a/README_SOURCE.md b/README_SOURCE.md
index 58058e3..93ff9a3 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -108,8 +108,8 @@ Type representing a class component
 class MyComponent extends React.Component<Props, State> { ...
 ```
 
-#### `React.ComponentProps<typeof Component>`
-Gets type of Component Props, so you don't need to export Props from your component ever! (Works for both FC and Class components)
+#### `React.ComponentProps<typeof Component>
+Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;
 ```

From d0e76f6db4b4b78b7b85856cbb4f150a5b3959f6 Mon Sep 17 00:00:00 2001
From: Piotr Witek <piotrek.witek@gmail.com>
Date: Thu, 24 Jan 2019 14:44:45 +0100
Subject: [PATCH 09/20] Added missing quote

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

diff --git a/README.md b/README.md
index 26b2f46..4a91b6d 100644
--- a/README.md
+++ b/README.md
@@ -108,7 +108,7 @@ Type representing a class component
 class MyComponent extends React.Component<Props, State> { ...
 ```
 
-#### `React.ComponentProps<typeof Component>
+#### `React.ComponentProps<typeof Component>`
 Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;
diff --git a/README_SOURCE.md b/README_SOURCE.md
index 93ff9a3..7bb81f0 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -108,7 +108,7 @@ Type representing a class component
 class MyComponent extends React.Component<Props, State> { ...
 ```
 
-#### `React.ComponentProps<typeof Component>
+#### `React.ComponentProps<typeof Component>`
 Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;

From bb8c5557dbdd61887fab352196250945fe9816c1 Mon Sep 17 00:00:00 2001
From: Arshad Kazmi <arshadkazmi42@gmail.com>
Date: Wed, 30 Jan 2019 07:57:40 +0530
Subject: [PATCH 10/20] Adds imports in module decleration

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

diff --git a/README.md b/README.md
index 4a91b6d..8a5bef8 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,7 @@ Issues can be funded by anyone and the money will be transparently distributed t
 - [Recipes](#recipes)
   - [Baseline tsconfig.json](#baseline-tsconfigjson)
   - [Default and Named Module Exports](#default-and-named-module-exports)
+  - [Imports in Module Decleration](#imports-in-module-decleration)
   - [Type Augmentation for npm libraries](#type-augmentation-for-npm-libraries)
   - [Override type-definitions for npm libraries](#override-type-definitions-for-npm-libraries)
 - [FAQ](#faq)
@@ -1595,6 +1596,18 @@ import Select from '@src/components/select';
 
 [⇧ back to top](#table-of-contents)
 
+### Imports in Module Decleration
+
+> When creating 3rd party modules declarations all the imports should be put inside the module decleration, otherwise it will be treated as augmentation and show error
+```ts
+declare module "react-custom-scrollbars" {
+    import * as React from "react";
+
+    export interface positionValues {
+    ...
+```
+[⇧ back to top](#table-of-contents)
+
 ### Type Augmentation for npm libraries
 Strategies to fix issues coming from external type-definitions files (*.d.ts)
 

From b32ad8b2776d87dd6c2383050e4b466bc176b757 Mon Sep 17 00:00:00 2001
From: Arshad Kazmi <arshadkazmi42@gmail.com>
Date: Wed, 30 Jan 2019 08:10:22 +0530
Subject: [PATCH 11/20] README_SOURCE update and README generated using script

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

diff --git a/README_SOURCE.md b/README_SOURCE.md
index 7bb81f0..0e1ad40 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -68,6 +68,7 @@ Issues can be funded by anyone and the money will be transparently distributed t
 - [Recipes](#recipes)
   - [Baseline tsconfig.json](#baseline-tsconfigjson)
   - [Default and Named Module Exports](#default-and-named-module-exports)
+  - [Imports in Module Decleration](#imports-in-module-decleration)
   - [Type Augmentation for npm libraries](#type-augmentation-for-npm-libraries)
   - [Override type-definitions for npm libraries](#override-type-definitions-for-npm-libraries)
 - [FAQ](#faq)
@@ -623,6 +624,18 @@ import Select from '@src/components/select';
 
 [⇧ back to top](#table-of-contents)
 
+### Imports in Module Decleration
+
+> When creating 3rd party modules declarations all the imports should be put inside the module decleration, otherwise it will be treated as augmentation and show error
+```ts
+declare module "react-custom-scrollbars" {
+    import * as React from "react";
+
+    export interface positionValues {
+    ...
+```
+[⇧ back to top](#table-of-contents)
+
 ### Type Augmentation for npm libraries
 Strategies to fix issues coming from external type-definitions files (*.d.ts)
 

From e602f908cf911aab1d28858566986359264df79d Mon Sep 17 00:00:00 2001
From: Piotr Witek <piotrek.witek@gmail.com>
Date: Thu, 24 Jan 2019 14:42:50 +0100
Subject: [PATCH 12/20] Added `React.ComponentProps<typeof Component>

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

diff --git a/README.md b/README.md
index e15e01f..26b2f46 100644
--- a/README.md
+++ b/README.md
@@ -108,8 +108,8 @@ Type representing a class component
 class MyComponent extends React.Component<Props, State> { ...
 ```
 
-#### `React.ComponentProps<typeof Component>`
-Gets type of Component Props, so you don't need to export Props from your component ever! (Works for both FC and Class components)
+#### `React.ComponentProps<typeof Component>
+Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;
 ```
diff --git a/README_SOURCE.md b/README_SOURCE.md
index 58058e3..93ff9a3 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -108,8 +108,8 @@ Type representing a class component
 class MyComponent extends React.Component<Props, State> { ...
 ```
 
-#### `React.ComponentProps<typeof Component>`
-Gets type of Component Props, so you don't need to export Props from your component ever! (Works for both FC and Class components)
+#### `React.ComponentProps<typeof Component>
+Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;
 ```

From 69756f209cb5b55ff45a8c923bd768e11491759e Mon Sep 17 00:00:00 2001
From: Piotr Witek <piotrek.witek@gmail.com>
Date: Thu, 24 Jan 2019 14:44:45 +0100
Subject: [PATCH 13/20] Added missing quote

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

diff --git a/README.md b/README.md
index 26b2f46..4a91b6d 100644
--- a/README.md
+++ b/README.md
@@ -108,7 +108,7 @@ Type representing a class component
 class MyComponent extends React.Component<Props, State> { ...
 ```
 
-#### `React.ComponentProps<typeof Component>
+#### `React.ComponentProps<typeof Component>`
 Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;
diff --git a/README_SOURCE.md b/README_SOURCE.md
index 93ff9a3..7bb81f0 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -108,7 +108,7 @@ Type representing a class component
 class MyComponent extends React.Component<Props, State> { ...
 ```
 
-#### `React.ComponentProps<typeof Component>
+#### `React.ComponentProps<typeof Component>`
 Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;

From 4da6157cafa083737e90c16328257f001ba794b2 Mon Sep 17 00:00:00 2001
From: Arshad Kazmi <arshadkazmi42@gmail.com>
Date: Wed, 30 Jan 2019 07:57:40 +0530
Subject: [PATCH 14/20] Adds imports in module decleration

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

diff --git a/README.md b/README.md
index 4a91b6d..8a5bef8 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,7 @@ Issues can be funded by anyone and the money will be transparently distributed t
 - [Recipes](#recipes)
   - [Baseline tsconfig.json](#baseline-tsconfigjson)
   - [Default and Named Module Exports](#default-and-named-module-exports)
+  - [Imports in Module Decleration](#imports-in-module-decleration)
   - [Type Augmentation for npm libraries](#type-augmentation-for-npm-libraries)
   - [Override type-definitions for npm libraries](#override-type-definitions-for-npm-libraries)
 - [FAQ](#faq)
@@ -1595,6 +1596,18 @@ import Select from '@src/components/select';
 
 [⇧ back to top](#table-of-contents)
 
+### Imports in Module Decleration
+
+> When creating 3rd party modules declarations all the imports should be put inside the module decleration, otherwise it will be treated as augmentation and show error
+```ts
+declare module "react-custom-scrollbars" {
+    import * as React from "react";
+
+    export interface positionValues {
+    ...
+```
+[⇧ back to top](#table-of-contents)
+
 ### Type Augmentation for npm libraries
 Strategies to fix issues coming from external type-definitions files (*.d.ts)
 

From b12c89f73f6014c1a33cfb2ff23c2ec49f796d14 Mon Sep 17 00:00:00 2001
From: Arshad Kazmi <arshadkazmi42@gmail.com>
Date: Wed, 30 Jan 2019 08:10:22 +0530
Subject: [PATCH 15/20] README_SOURCE update and README generated using script

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

diff --git a/README_SOURCE.md b/README_SOURCE.md
index 7bb81f0..0e1ad40 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -68,6 +68,7 @@ Issues can be funded by anyone and the money will be transparently distributed t
 - [Recipes](#recipes)
   - [Baseline tsconfig.json](#baseline-tsconfigjson)
   - [Default and Named Module Exports](#default-and-named-module-exports)
+  - [Imports in Module Decleration](#imports-in-module-decleration)
   - [Type Augmentation for npm libraries](#type-augmentation-for-npm-libraries)
   - [Override type-definitions for npm libraries](#override-type-definitions-for-npm-libraries)
 - [FAQ](#faq)
@@ -623,6 +624,18 @@ import Select from '@src/components/select';
 
 [⇧ back to top](#table-of-contents)
 
+### Imports in Module Decleration
+
+> When creating 3rd party modules declarations all the imports should be put inside the module decleration, otherwise it will be treated as augmentation and show error
+```ts
+declare module "react-custom-scrollbars" {
+    import * as React from "react";
+
+    export interface positionValues {
+    ...
+```
+[⇧ back to top](#table-of-contents)
+
 ### Type Augmentation for npm libraries
 Strategies to fix issues coming from external type-definitions files (*.d.ts)
 

From bdec1e5f38bfaf44f07c4fc6ec77514a9524a88c Mon Sep 17 00:00:00 2001
From: Piotrek Witek <piotrek.witek@gmail.com>
Date: Sun, 3 Feb 2019 19:18:11 +0100
Subject: [PATCH 16/20] Updated tests to fix build Closed #95 (#133)

---
 README.md                                     | 28 +++++++------
 .../__snapshots__/reducer.spec.ts.snap        |  8 ----
 .../features/todos-typesafe/reducer.spec.ts   | 39 -------------------
 playground/src/features/todos/reducer.spec.ts | 28 +++++++------
 4 files changed, 32 insertions(+), 71 deletions(-)
 delete mode 100644 playground/src/features/todos-typesafe/__snapshots__/reducer.spec.ts.snap
 delete mode 100644 playground/src/features/todos-typesafe/reducer.spec.ts

diff --git a/README.md b/README.md
index e15e01f..964af82 100644
--- a/README.md
+++ b/README.md
@@ -1135,15 +1135,17 @@ export default combineReducers<TodosState, TodosAction>({
 ### Testing reducer
 
 ```tsx
-import { todosReducer as reducer, todosActions as actions } from './';
+import {
+  todosReducer as reducer,
+  todosActions as actions,
+  TodosState,
+} from './';
 
 /**
  * FIXTURES
  */
-const activeTodo = { id: '1', completed: false, title: 'active todo' };
-const completedTodo = { id: '2', completed: true, title: 'completed todo' };
-
-const initialState = reducer(undefined, {} as any);
+const getInitialState = (initial?: Partial<TodosState>) =>
+  reducer(initial as TodosState, {} as any);
 
 /**
  * STORIES
@@ -1151,25 +1153,27 @@ const initialState = reducer(undefined, {} as any);
 describe('Todos Stories', () => {
   describe('initial state', () => {
     it('should match a snapshot', () => {
+      const initialState = getInitialState();
       expect(initialState).toMatchSnapshot();
     });
   });
 
   describe('adding todos', () => {
     it('should add a new todo as the first element', () => {
-      const action = actions.add('new todo');
-      const state = reducer(initialState, action);
+      const initialState = getInitialState();
+      expect(initialState.todos).toHaveLength(0);
+      const state = reducer(initialState, actions.add('new todo'));
       expect(state.todos).toHaveLength(1);
-      expect(state.todos[0].id).toEqual(action.payload.id);
+      expect(state.todos[0].title).toEqual('new todo');
     });
   });
 
   describe('toggling completion state', () => {
     it('should mark active todo as complete', () => {
-      const action = actions.toggle(activeTodo.id);
-      const state0 = { ...initialState, todos: [activeTodo] };
-      expect(state0.todos[0].completed).toBeFalsy();
-      const state1 = reducer(state0, action);
+      const activeTodo = { id: '1', completed: false, title: 'active todo' };
+      const initialState = getInitialState({ todos: [activeTodo] });
+      expect(initialState.todos[0].completed).toBeFalsy();
+      const state1 = reducer(initialState, actions.toggle(activeTodo.id));
       expect(state1.todos[0].completed).toBeTruthy();
     });
   });
diff --git a/playground/src/features/todos-typesafe/__snapshots__/reducer.spec.ts.snap b/playground/src/features/todos-typesafe/__snapshots__/reducer.spec.ts.snap
deleted file mode 100644
index 6fee5bc..0000000
--- a/playground/src/features/todos-typesafe/__snapshots__/reducer.spec.ts.snap
+++ /dev/null
@@ -1,8 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Todos Stories initial state should match a snapshot 1`] = `
-Object {
-  "todos": Array [],
-  "todosFilter": "",
-}
-`;
diff --git a/playground/src/features/todos-typesafe/reducer.spec.ts b/playground/src/features/todos-typesafe/reducer.spec.ts
deleted file mode 100644
index cfa7010..0000000
--- a/playground/src/features/todos-typesafe/reducer.spec.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { todosReducer as reducer, todosActions as actions } from './';
-
-/**
- * FIXTURES
- */
-const activeTodo = { id: '1', completed: false, title: 'active todo' };
-const completedTodo = { id: '2', completed: true, title: 'completed todo' };
-
-const initialState = reducer(undefined, {} as any);
-
-/**
- * STORIES
- */
-describe('Todos Stories', () => {
-  describe('initial state', () => {
-    it('should match a snapshot', () => {
-      expect(initialState).toMatchSnapshot();
-    });
-  });
-
-  describe('adding todos', () => {
-    it('should add a new todo as the first element', () => {
-      const action = actions.add({ title: 'new todo' });
-      const state = reducer(initialState, action);
-      expect(state.todos).toHaveLength(1);
-      expect(state.todos[0].id).toEqual(action.payload.id);
-    });
-  });
-
-  describe('toggling completion state', () => {
-    it('should mark active todo as complete', () => {
-      const action = actions.toggle(activeTodo);
-      const state0 = { ...initialState, todos: [activeTodo] };
-      expect(state0.todos[0].completed).toBeFalsy();
-      const state1 = reducer(state0, action);
-      expect(state1.todos[0].completed).toBeTruthy();
-    });
-  });
-});
diff --git a/playground/src/features/todos/reducer.spec.ts b/playground/src/features/todos/reducer.spec.ts
index 2dc03d2..ddfdce0 100644
--- a/playground/src/features/todos/reducer.spec.ts
+++ b/playground/src/features/todos/reducer.spec.ts
@@ -1,12 +1,14 @@
-import { todosReducer as reducer, todosActions as actions } from './';
+import {
+  todosReducer as reducer,
+  todosActions as actions,
+  TodosState,
+} from './';
 
 /**
  * FIXTURES
  */
-const activeTodo = { id: '1', completed: false, title: 'active todo' };
-const completedTodo = { id: '2', completed: true, title: 'completed todo' };
-
-const initialState = reducer(undefined, {} as any);
+const getInitialState = (initial?: Partial<TodosState>) =>
+  reducer(initial as TodosState, {} as any);
 
 /**
  * STORIES
@@ -14,25 +16,27 @@ const initialState = reducer(undefined, {} as any);
 describe('Todos Stories', () => {
   describe('initial state', () => {
     it('should match a snapshot', () => {
+      const initialState = getInitialState();
       expect(initialState).toMatchSnapshot();
     });
   });
 
   describe('adding todos', () => {
     it('should add a new todo as the first element', () => {
-      const action = actions.add('new todo');
-      const state = reducer(initialState, action);
+      const initialState = getInitialState();
+      expect(initialState.todos).toHaveLength(0);
+      const state = reducer(initialState, actions.add('new todo'));
       expect(state.todos).toHaveLength(1);
-      expect(state.todos[0].id).toEqual(action.payload.id);
+      expect(state.todos[0].title).toEqual('new todo');
     });
   });
 
   describe('toggling completion state', () => {
     it('should mark active todo as complete', () => {
-      const action = actions.toggle(activeTodo.id);
-      const state0 = { ...initialState, todos: [activeTodo] };
-      expect(state0.todos[0].completed).toBeFalsy();
-      const state1 = reducer(state0, action);
+      const activeTodo = { id: '1', completed: false, title: 'active todo' };
+      const initialState = getInitialState({ todos: [activeTodo] });
+      expect(initialState.todos[0].completed).toBeFalsy();
+      const state1 = reducer(initialState, actions.toggle(activeTodo.id));
       expect(state1.todos[0].completed).toBeTruthy();
     });
   });

From 8ccc7c8c78ab7525080fab1b8d9d2344f91f073c Mon Sep 17 00:00:00 2001
From: Arshad Kazmi <arshadkazmi42@gmail.com>
Date: Wed, 30 Jan 2019 07:57:40 +0530
Subject: [PATCH 17/20] Adds imports in module decleration

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

diff --git a/README.md b/README.md
index 964af82..84883d4 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,7 @@ Issues can be funded by anyone and the money will be transparently distributed t
 - [Recipes](#recipes)
   - [Baseline tsconfig.json](#baseline-tsconfigjson)
   - [Default and Named Module Exports](#default-and-named-module-exports)
+  - [Imports in Module Decleration](#imports-in-module-decleration)
   - [Type Augmentation for npm libraries](#type-augmentation-for-npm-libraries)
   - [Override type-definitions for npm libraries](#override-type-definitions-for-npm-libraries)
 - [FAQ](#faq)
@@ -1599,6 +1600,18 @@ import Select from '@src/components/select';
 
 [⇧ back to top](#table-of-contents)
 
+### Imports in Module Decleration
+
+> When creating 3rd party modules declarations all the imports should be put inside the module decleration, otherwise it will be treated as augmentation and show error
+```ts
+declare module "react-custom-scrollbars" {
+    import * as React from "react";
+
+    export interface positionValues {
+    ...
+```
+[⇧ back to top](#table-of-contents)
+
 ### Type Augmentation for npm libraries
 Strategies to fix issues coming from external type-definitions files (*.d.ts)
 

From 9ee8c3fabd5e321d51528de3166cf9bc26f81143 Mon Sep 17 00:00:00 2001
From: Arshad Kazmi <arshadkazmi42@gmail.com>
Date: Wed, 30 Jan 2019 08:10:22 +0530
Subject: [PATCH 18/20] README_SOURCE update and README generated using script

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

diff --git a/README_SOURCE.md b/README_SOURCE.md
index 58058e3..4e81f2d 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -68,6 +68,7 @@ Issues can be funded by anyone and the money will be transparently distributed t
 - [Recipes](#recipes)
   - [Baseline tsconfig.json](#baseline-tsconfigjson)
   - [Default and Named Module Exports](#default-and-named-module-exports)
+  - [Imports in Module Decleration](#imports-in-module-decleration)
   - [Type Augmentation for npm libraries](#type-augmentation-for-npm-libraries)
   - [Override type-definitions for npm libraries](#override-type-definitions-for-npm-libraries)
 - [FAQ](#faq)
@@ -623,6 +624,18 @@ import Select from '@src/components/select';
 
 [⇧ back to top](#table-of-contents)
 
+### Imports in Module Decleration
+
+> When creating 3rd party modules declarations all the imports should be put inside the module decleration, otherwise it will be treated as augmentation and show error
+```ts
+declare module "react-custom-scrollbars" {
+    import * as React from "react";
+
+    export interface positionValues {
+    ...
+```
+[⇧ back to top](#table-of-contents)
+
 ### Type Augmentation for npm libraries
 Strategies to fix issues coming from external type-definitions files (*.d.ts)
 

From e32c653e7101f58ddf1e7f5e8c6198d77adab3d5 Mon Sep 17 00:00:00 2001
From: Piotr Witek <piotrek.witek@gmail.com>
Date: Thu, 24 Jan 2019 14:42:50 +0100
Subject: [PATCH 19/20] Added `React.ComponentProps<typeof Component>

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

diff --git a/README.md b/README.md
index 84883d4..c2e3c0d 100644
--- a/README.md
+++ b/README.md
@@ -109,8 +109,8 @@ Type representing a class component
 class MyComponent extends React.Component<Props, State> { ...
 ```
 
-#### `React.ComponentProps<typeof Component>`
-Gets type of Component Props, so you don't need to export Props from your component ever! (Works for both FC and Class components)
+#### `React.ComponentProps<typeof Component>
+Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;
 ```
diff --git a/README_SOURCE.md b/README_SOURCE.md
index 4e81f2d..8f5bfa5 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -109,8 +109,8 @@ Type representing a class component
 class MyComponent extends React.Component<Props, State> { ...
 ```
 
-#### `React.ComponentProps<typeof Component>`
-Gets type of Component Props, so you don't need to export Props from your component ever! (Works for both FC and Class components)
+#### `React.ComponentProps<typeof Component>
+Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;
 ```

From 05fd17fe73ce4e8f83f729fd54f7be75f539c9ac Mon Sep 17 00:00:00 2001
From: Piotr Witek <piotrek.witek@gmail.com>
Date: Thu, 24 Jan 2019 14:44:45 +0100
Subject: [PATCH 20/20] Added missing quote

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

diff --git a/README.md b/README.md
index c2e3c0d..3218571 100644
--- a/README.md
+++ b/README.md
@@ -109,7 +109,7 @@ Type representing a class component
 class MyComponent extends React.Component<Props, State> { ...
 ```
 
-#### `React.ComponentProps<typeof Component>
+#### `React.ComponentProps<typeof Component>`
 Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;
diff --git a/README_SOURCE.md b/README_SOURCE.md
index 8f5bfa5..0e1ad40 100644
--- a/README_SOURCE.md
+++ b/README_SOURCE.md
@@ -109,7 +109,7 @@ Type representing a class component
 class MyComponent extends React.Component<Props, State> { ...
 ```
 
-#### `React.ComponentProps<typeof Component>
+#### `React.ComponentProps<typeof Component>`
 Gets component Props type. You don't no need to export Props from your component ever!
 ```tsx
 type MyComponentProps = React.ComponentProps<typeof MyComponent>;