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.