diff --git a/CHANGELOG.md b/CHANGELOG.md index 223b6c4..71ff135 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,8 @@ - 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) +- `react-cookie`: Add `WrappedComponent` static property when using `withCookies` (#225) +- `react-cookie`: Fix display name to include the original component name ## v4.0.0 diff --git a/packages/react-cookie/README.md b/packages/react-cookie/README.md index f3a0256..2c30fa7 100644 --- a/packages/react-cookie/README.md +++ b/packages/react-cookie/README.md @@ -113,7 +113,7 @@ Your original static properties will be hoisted on the returned component. You c function MyComponent() { return null; } -const NewComponent = withRouter(MyComponent); +const NewComponent = withCookies(MyComponent); NewComponent.WrappedComponent === MyComponent; ``` diff --git a/packages/react-cookie/src/__tests__/withCookies-test.js b/packages/react-cookie/src/__tests__/withCookies-test.js index af50edc..8ad9f00 100644 --- a/packages/react-cookie/src/__tests__/withCookies-test.js +++ b/packages/react-cookie/src/__tests__/withCookies-test.js @@ -126,6 +126,19 @@ describe('withCookies(Component)', () => { const Component = withCookies(TestComponent); expect(Component.WrappedComponent).toBe(TestComponent); }); + + it('format withCookies() with display name first', () => { + const MyNameComponent = () => null; + MyNameComponent.displayName = 'MyDisplayName'; + const Component = withCookies(MyNameComponent); + expect(Component.displayName).toBe('withCookies(MyDisplayName)'); + }); + + it('format withCookies() with name as fallback', () => { + const MyNameComponent = () => null; + const Component = withCookies(MyNameComponent); + expect(Component.displayName).toBe('withCookies(MyNameComponent)'); + }); }); describe('on the server', () => { diff --git a/packages/react-cookie/src/withCookies.tsx b/packages/react-cookie/src/withCookies.tsx index 4a7b459..3e71e90 100644 --- a/packages/react-cookie/src/withCookies.tsx +++ b/packages/react-cookie/src/withCookies.tsx @@ -18,6 +18,7 @@ export default function withCookies( class CookieWrapper extends React.Component { static displayName = `withCookies(${name})`; + static WrappedComponent = WrappedComponent; onChange = () => { // Make sure to update children with new values @@ -61,19 +62,18 @@ export default function withCookies( } } - const CookieWrapperWithRefAndCookieConsumer: any = React.forwardRef( - (props, ref) => { - return ( - - {(cookies: Cookies) => ( - - )} - - ); - } - ); + const ForwardedComponent: any = React.forwardRef((props: any, ref: any) => { + return ( + + {(cookies: Cookies) => ( + + )} + + ); + }); - CookieWrapperWithRefAndCookieConsumer.WrappedComponent = WrappedComponent; + ForwardedComponent.displayName = CookieWrapper.displayName; + ForwardedComponent.WrappedComponent = CookieWrapper.WrappedComponent; - return hoistStatics(CookieWrapperWithRefAndCookieConsumer, WrappedComponent); + return hoistStatics(ForwardedComponent, WrappedComponent); }