Adds imports in module decleration

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__
@@ -72,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)
@@ -109,16 +111,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,30 +133,26 @@ 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)
 ```tsx
 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)
 ```tsx
 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 +161,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 +169,7 @@ const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }
 
 <div onMouseMove={handleChange} ... />
 ```
+
 [⇧ back to top](#table-of-contents)
 
 ---
@@ -766,10 +768,127 @@ 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
 
+#### - 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.
 
@@ -826,6 +945,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
@@ -1465,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)