From 7581dc7838d787151146b6e6183e6cf98c19791f Mon Sep 17 00:00:00 2001
From: James Prado <james-prado@users.noreply.github.com>
Date: Tue, 14 Nov 2017 20:17:43 -0500
Subject: [PATCH] Update readme - typing injected props (#375)

---
 README.md | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index dc60b46e..d97f9173 100644
--- a/README.md
+++ b/README.md
@@ -165,13 +165,13 @@ export * from './actionTypes';
 ### Higher Order Components
 
 #### Typing Injected Props
-Props made available through higher order components can be tricky to type. Normally, if a component requires a prop, you add it to the component's interface and it just works. However, working with injected props from [higher order components](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e), you will be forced to supply all required props whenever you compose the component.  
+Props made available through higher order components can be tricky to type. Normally, if a component requires a prop, you add it to the component's interface and it just works. However, working with injected props from [higher order components](https://medium.com/@DanHomola/react-higher-order-components-in-typescript-made-simple-6f9b55691af1), you will be forced to supply all required props whenever you compose the component.  
 
 ```ts
 interface MyComponentProps {
   name: string;
   countryCode?: string;
-  router: InjectedRouter;
+  routerLocation: { pathname: string };
 }
 
 ...
@@ -182,13 +182,13 @@ class OtherComponent extends React.Component<{}, {}> {
       <MyComponent
         name="foo"
         countryCode="CA"
-        // Error: 'router' is missing!
+        // Error: 'routerLocation' is missing!
         />
     );
   }
 ```
 
-Instead of tacking the injected props on to the MyComponentProps interface itself, put them on another interface that extends the main interface:
+Instead of tacking the injected props on the MyComponentProps interface, put them in another interface called `InjectedProps`:
 
 ```ts
 interface MyComponentProps {
@@ -196,29 +196,26 @@ interface MyComponentProps {
   countryCode?: string;
 }
 
-interface InjectedProps extends MyComponentProps {
-  router: InjectedRouter;
+interface InjectedProps  {
+  routerLocation: { pathname: string };
 }
 ```
 
-Now you can add a [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) to the component to derive the injected props from the props object at runtime:
+Now add a [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) to cast `this.props` as the original props - `MyComponentProps` and the injected props - `InjectedProps`:
 
 ```ts
 class MyComponent extends React.Component<MyComponentProps, {}> {
   get injected() {
-    return this.props as InjectedProps;
+    return this.props as MyComponentProps & InjectedProps;
   }
 
   render() {
-    const { name, countryCode } = this.props;
-    const { router } = this.injected;
+    const { name, countryCode, routerLocation } = this.props;
     ...
   }
 }
 ```
 
-All the injected props are now strongly typed, while staying private to the module, and not polluting the public props interface.
-
 ## Event Handlers
 
 Event handlers such as `onChange` and `onClick`, should be properly typed. For example, if you have an event listener on an input element inside a form: