Allow users to import default

README.md

@@ -20,23 +20,24 @@ For older browsers, it falls back to Paul Irish's implementation of `matchMedia`
 All you need to do is wrap your content (React Components or jsx or html...) for the specific screen/device you are trying to target, and set the media query accordingly:
 
 ```javascript
-    import { ResponsiveComponent } from "react-responsive-component";
+    import RenderIf from "react-responsive-component";
     ...
-    <ResponsiveComponent query="only screen and (max-width: 480px)">
+    <RenderIf query="only screen and (max-width: 480px)">
         <HamburgerBtn userId={userId} />
-    </ResponsiveComponent>
+    </RenderIf>
 
-    <ResponsiveComponent query="only screen and (min-width: 480px)">
+    <RenderIf query="only screen and (min-width: 480px)">
         <ProfileDropDown userId={userId} />
-    </ResponsiveComponent>
+    </RenderIf>
 ```
 
 #### Optional props
 
 You can pass a `tag` props to specify the tagname of the responsive component wrapper.
+This helps to alleviate extraneous `<div>` elements.
 
 ```javascript
-    <ResponsiveComponent query="tv" tag="ul">
+    <RenderIf query="tv" tag="ul">
         <li>This feature is not supported on TVs yet :(</li>
-    </ResponsiveComponent>
+    </RenderIf>
 ```

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.8",
+  "version": "1.1.0",
   "name": "react-responsive-component",
   "description": "A responsive React component that reacts to media queries.",
   "keywords": ["react", "reactjs", "responsive"],

src/index.js

@@ -1,5 +1,19 @@
 import "matchmedia-polyfill";
 import "matchmedia-polyfill/matchMedia.addListener";
-import ResponsiveComponent from "./ui/ResponsiveComponent";
+import ResponsiveComponentDefault from "./ui/ResponsiveComponent";
 
-export { ResponsiveComponent };
+class ResponsiveComponent extends ResponsiveComponentDefault {
+    constructor(props) {
+        super(props);
+        console.warn( //eslint-disable-line no-console
+            "The following format is deprecated:\n" +
+            "  import { ResponsiveComponent } from 'react-responsive-component';\n" +
+            "Please use this format instead:\n" +
+            "  import RenderIf from 'react-responsive-component';\n" +
+            "This will stop working completely in verion 2.x"
+        );
+    }
+}
+
+export default ResponsiveComponentDefault; // This is the new way.
+export { ResponsiveComponent }; // This is the old way.