docs(readme): further flesh out custom resize handles

Author: STRML

README.md

@@ -147,14 +147,14 @@ This requires no special treatment.
 
 ##### Custom React Component
 
-You must [forward the ref](https://reactjs.org/docs/forwarding-refs.html) to the underlying DOM element.
+You must [forward the ref](https://reactjs.org/docs/forwarding-refs.html) and props to the underlying DOM element.
 
 ###### Class Components
 
 ```js
 class MyHandleComponent extends React.Component {
   render() {
-    return <div ref={this.props.innerRef} className="foo" />
+    return <div ref={this.props.innerRef} className="foo" {...this.props} />
   }
 }
 const MyHandle = React.forwardRef((props, ref) => <MyHandleComponent innerRef={ref} {...props} />);
@@ -166,7 +166,7 @@ const MyHandle = React.forwardRef((props, ref) => <MyHandleComponent innerRef={r
 
 ```js
 const MyHandle = React.forwardRef((props, ref) => {
-  return <div ref={ref} className="foo" />;
+  return <div ref={ref} className="foo" {...props} />;
 });
 
 <Resizable handle={<MyHandle />} />
@@ -178,7 +178,7 @@ You can define a function as a handle, which will simply receive props and ref.
 
 ```js
 const MyHandle = (props) => {
-  return <div ref={props.innerRef} className="foo" />;
+  return <div ref={props.innerRef} className="foo" {...props} />;
 };
 
 <Resizable handle={(props, ref) => <MyHandle innerRef={ref} {...props} />} />

examples/ExampleLayout.js

@@ -4,6 +4,16 @@ import ResizableBox from '../lib/ResizableBox';
 import 'style-loader!css-loader!../css/styles.css';
 import 'style-loader!css-loader!./example.css';
 
+const CustomResizeHandle = React.forwardRef((props, ref) => {
+  return (
+    <div
+      className="custom-handle custom-handle-se custom-resize-handle-component"
+      ref={ref}
+      {...props}
+    ></div>
+  )
+})
+
 export default class ExampleLayout extends React.Component<{}, {width: number, height: number}> {
   state = {
     width: 200,
@@ -77,7 +87,15 @@ export default class ExampleLayout extends React.Component<{}, {width: number, h
             className="custom-box box"
             width={200}
             height={200}
-            handle={(h, ref) => <span className={`custom-handle custom-handle-${h}`} />}
+            handle={<CustomResizeHandle />}
+            handleSize={[8, 8]}>
+            <span className="text">{"<ResizableBox> with a custom resize handle component."}</span>
+          </ResizableBox>
+          <ResizableBox
+            className="custom-box box"
+            width={200}
+            height={200}
+            handle={(h, ref) => <span className={`custom-handle custom-handle-${h}`} ref={ref} />}
             handleSize={[8, 8]}
             resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
             <span className="text">{"<ResizableBox> with custom handles in all locations."}</span>

examples/example.css

@@ -112,4 +112,7 @@
 }
 .custom-handle-s {
   bottom: -4px;
+}
+.custom-resize-handle-component {
+  background-color: red;
 }