Support styled-components@4.0.2

Author: FreddyFY

dist/index.js

@@ -8,6 +8,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { ContainerQuery } from 'react-container-query';
 import classNames from 'classnames';
+import hoistStatics from 'hoist-non-react-statics';
 import domElements from './dom-elements';
 import newClassName from './utils/new-class-name';
 import kebabToCamel from './utils/kebab-to-camel';
@@ -55,8 +56,7 @@ function removeUnit(value) {
 const constructWithOptions = Component => (strings, ...expressions) => {
   const [cssStrings, query] = parseCss(strings);
   const StyledComponent = styled(Component)(cssStrings, ...expressions);
-
-  const StyledContainerQuery = (_ref) => {
+  const StyledContainerQuery = React.forwardRef((_ref, ref) => {
     let {
       className
     } = _ref,
@@ -65,11 +65,11 @@ const constructWithOptions = Component => (strings, ...expressions) => {
     return React.createElement(ContainerQuery, {
       query: query
     }, params => React.createElement(StyledComponent, _extends({
+      ref: ref,
       className: classNames(params, className)
     }, f)));
-  };
-
-  return Object.assign(StyledContainerQuery, StyledComponent);
+  });
+  return hoistStatics(StyledContainerQuery, StyledComponent);
 };
 
 const styledContainerQuery = (() => {

package-lock.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
+    "hoist-non-react-statics": "^3.0.1",
     "react-container-query": "^0.11.0",
     "shorthash": "0.0.2"
   },

package.json

@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { ContainerQuery } from 'react-container-query'
 import classNames from 'classnames'
+import hoistStatics from 'hoist-non-react-statics'
 import domElements from './dom-elements'
 import newClassName from './utils/new-class-name'
 import kebabToCamel from './utils/kebab-to-camel'
@@ -51,12 +52,12 @@ function removeUnit(value) {
 const constructWithOptions = Component => (strings, ...expressions) => {
   const [cssStrings, query] = parseCss(strings)
   const StyledComponent = styled(Component)(cssStrings, ...expressions)
-  const StyledContainerQuery = ({ className, ...f }) => (
+  const StyledContainerQuery = React.forwardRef(({ className, ...f }, ref) => (
     <ContainerQuery query={query}>
-      {params => <StyledComponent className={classNames(params, className)} {...f} />}
+      {params => <StyledComponent ref={ref} className={classNames(params, className)} {...f} />}
     </ContainerQuery>
-  )
-  return Object.assign(StyledContainerQuery, StyledComponent)
+  ))
+  return hoistStatics(StyledContainerQuery, StyledComponent)
 }
 
 const styledContainerQuery = (() => {