Added typesafe forward-ref component implementation

playground/src/components/fc-forward-ref.md

@@ -0,0 +1,11 @@
+Usage:
+```jsx { "filePath": "./fc-forward-ref.usage.tsx" }
+```
+
+Usage Demo:
+```jsx
+const Demo = require('./fc-forward-ref.usage').default;
+<Demo />
+```
+
+[⇦ back to guide](https://github.com/piotrwitek/react-redux-typescript-guide#--fc-counter)

playground/src/components/fc-forward-ref.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export type FancyButtonProps = {
+ className?: string;
+ children?: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+// using function DevTools will show "ForwardRef(FancyButton)" instead of just "ForwardRef"
+export const FancyButton = React.forwardRef<
+ HTMLButtonElement,
+ FancyButtonProps
+>(function FancyButton(props, ref) {
+ return (
+ <button ref={ref} className="FancyButton" {...props}>
+ {props.children}
+ </button>
+ );
+});
+

playground/src/components/fc-forward-ref.usage.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+import { FancyButton } from '.';
+
+const ref = React.createRef<HTMLButtonElement>();
+export default () => <FancyButton ref={ref}>Click me!</FancyButton>;

playground/src/routes/Home.tsx

@@ -1,17 +1,20 @@
-import React from 'react'
+import React from 'react';
+
+import ClassCounterWithDefaultPropsUsage from '../components/class-counter-with-default-props.usage';
+import ClassCounterUsage from '../components/class-counter.usage';
 import FCCounterUsage from '../components/fc-counter.usage';
+import FcForwardRefUsage from '../components/fc-forward-ref.usage';
 import FCSpreadAttributesUsage from '../components/fc-spread-attributes.usage';
-import ClassCounterUsage from '../components/class-counter.usage';
-import ClassCounterWithDefaultPropsUsage from '../components/class-counter-with-default-props.usage';
 import UserListUsage from '../components/generic-list.usage';
+import WithConnectedCountUsage from '../hoc/with-connected-count.usage';
 import WithErrorBoundaryUsage from '../hoc/with-error-boundary.usage';
 import WithStateUsage from '../hoc/with-state.usage';
-import WithConnectedCountUsage from '../hoc/with-connected-count.usage';
 
 export function Home() {
  return (
  <section>
  <FCCounterUsage />
+ <FcForwardRefUsage />
  <FCSpreadAttributesUsage />
  <ClassCounterUsage />
  <ClassCounterWithDefaultPropsUsage />