diff --git a/README.md b/README.md
index 3ead81b..f280a49 100644
--- a/README.md
+++ b/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";
...
-
+
-
+
-
+
-
+
```
#### Optional props
You can pass a `tag` props to specify the tagname of the responsive component wrapper.
+This helps to alleviate extraneous `
` elements.
```javascript
-
+
This feature is not supported on TVs yet :(
-
+
```
diff --git a/package.json b/package.json
index c36c415..859ec52 100644
--- a/package.json
+++ b/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"],
diff --git a/src/index.js b/src/index.js
index b9a8324..9e66b32 100644
--- a/src/index.js
+++ b/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.