react-cookie - Add WrappedComponent static property when using withRo…

…uter (#225)
bendotcodes · Jul 4, 2019 · 1f43a41 · 1f43a41
1 parent a8b53a5
commit 1f43a41
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Upgrade dependencies to last versions
 - Publish MIT license to NPM with the code (#224)
 - `universal-cookie`: Add support for generic type with reading cookies (#222)
+- `react-cookie`: Add `WrappedComponent` static property when using `withRouter` (#225)
 
 ## v4.0.0
 

diff --git a/packages/react-cookie/README.md b/packages/react-cookie/README.md
@@ -33,9 +33,18 @@
 or in the browser (global variable `ReactCookie`):
 
 ```html
-<script crossorigin src="https://unpkg.com/react@16/umd/react.production.js"></script>
-<script crossorigin src="https://unpkg.com/universal-cookie@3/umd/universalCookie.min.js"></script>
-<script crossorigin src="https://unpkg.com/react-cookie@3/umd/reactCookie.min.js"></script>
+<script
+  crossorigin
+  src="https://unpkg.com/react@16/umd/react.production.js"
+></script>
+<script
+  crossorigin
+  src="https://unpkg.com/universal-cookie@3/umd/universalCookie.min.js"
+></script>
+<script
+  crossorigin
+  src="https://unpkg.com/react-cookie@3/umd/reactCookie.min.js"
+></script>
 ```
 
 ## `<CookiesProvider />`
@@ -98,6 +107,16 @@ Give access to your cookies anywhere. Add the following props to your component:
 - cookies: Cookies instance allowing you to get, set and remove cookies.
 - allCookies: All your current cookies in an object.
 
+Your original static properties will be hoisted on the returned component. You can also access the original component by using the `WrappedComponent` static property. Example:
+
+```jsx
+function MyComponent() {
+  return null;
+}
+const NewComponent = withRouter(MyComponent);
+NewComponent.WrappedComponent === MyComponent;
+```
+
 ## Cookies
 
 ### `get(name, [options])`

diff --git a/packages/react-cookie/src/__tests__/withCookies-test.js b/packages/react-cookie/src/__tests__/withCookies-test.js
@@ -121,6 +121,11 @@ describe('withCookies(Component)', () => {
 
       expect(ref.current.testValue).toBe('Suki is pretty');
     });
+
+    it('provide the WrappedComponent', () => {
+      const Component = withCookies(TestComponent);
+      expect(Component.WrappedComponent).toBe(TestComponent);
+    });
   });
 
   describe('on the server', () => {

diff --git a/packages/react-cookie/src/withCookies.tsx b/packages/react-cookie/src/withCookies.tsx
@@ -11,14 +11,13 @@ type Diff<T, U> = T extends U ? never : T;
 type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;
 
 export default function withCookies<T extends ReactCookieProps>(
-  WrapperComponent: React.ComponentType<T>
+  WrappedComponent: React.ComponentType<T>
 ): React.ComponentType<Omit<T, keyof ReactCookieProps>> {
   // @ts-ignore
-  const name = WrapperComponent.displayName || WrapperComponent.name;
+  const name = WrappedComponent.displayName || WrappedComponent.name;
 
   class CookieWrapper extends React.Component<any, any> {
     static displayName = `withCookies(${name})`;
-    static WrapperComponent = WrapperComponent;
 
     onChange = () => {
       // Make sure to update children with new values
@@ -52,7 +51,7 @@ export default function withCookies<T extends ReactCookieProps>(
       const { forwardedRef, cookies, ...restProps } = this.props;
       const allCookies = cookies.getAll();
       return (
-        <WrapperComponent
+        <WrappedComponent
           {...(restProps as T)}
           ref={forwardedRef}
           cookies={cookies}
@@ -62,7 +61,7 @@ export default function withCookies<T extends ReactCookieProps>(
     }
   }
 
-  const CookieWrapperWithRefAndCookieConsumer = React.forwardRef(
+  const CookieWrapperWithRefAndCookieConsumer: any = React.forwardRef(
     (props, ref) => {
       return (
         <Consumer>
@@ -74,7 +73,7 @@ export default function withCookies<T extends ReactCookieProps>(
     }
   );
 
-  return hoistStatics(CookieWrapperWithRefAndCookieConsumer, WrapperComponent, {
-    WrappedComponent: true
-  });
+  CookieWrapperWithRefAndCookieConsumer.WrappedComponent = WrappedComponent;
+
+  return hoistStatics(CookieWrapperWithRefAndCookieConsumer, WrappedComponent);
 }