add forwardref and hoc example to ADVANCED

swyxio · web-flow · commit e474dc2a27ac · 2019-01-21T13:21:34.000-08:00
diff --git a/ADVANCED.md b/ADVANCED.md
@@ -146,6 +146,10 @@ export function inject<TProps, TInjectedKeys extends keyof TProps>(
  }
 ```
 
+### Using `forwardRef`
+
+For "true" reusability you should also consider exposing a ref for your HOC. You can use `React.forwardRef<Ref, Props>` as documented in [the basic cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/blob/master/README.md#forwardrefcreateref), but we are interested in more real world examples. [Here is a nice example in practice](https://gist.github.com/OliverJAsh/d2f462b03b3e6c24f5588ca7915d010e) from @OliverJAsh.
+
 ## Render Props
 
 Sometimes you will want to write a function that can take a React element or a string or something else as a prop. The best Type to use for such a situation is `React.ReactNode` which fits anywhere a normal, well, React Node would fit:

Original file line number	Diff line number	Diff line change
`@@ -146,6 +146,10 @@ export function inject<TProps, TInjectedKeys extends keyof TProps>(`
`146`	`146`	`}`
`147`	`147`	```
`148`	`148`
	`149`	+### Using `forwardRef`
	`150`	`+`
	`151`	+For "true" reusability you should also consider exposing a ref for your HOC. You can use `React.forwardRef<Ref, Props>` as documented in [the basic cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/blob/master/README.md#forwardrefcreateref), but we are interested in more real world examples. [Here is a nice example in practice](https://gist.github.com/OliverJAsh/d2f462b03b3e6c24f5588ca7915d010e) from @OliverJAsh.
	`152`	`+`
`149`	`153`	`## Render Props`
`150`	`154`
`151`	`155`	Sometimes you will want to write a function that can take a React element or a string or something else as a prop. The best Type to use for such a situation is `React.ReactNode` which fits anywhere a normal, well, React Node would fit: