simpler-react-responsive

Even simpler usage of react-responsive package!

Usage no npm install needed!

<script type="module">
  import simplerReactResponsive from 'https://cdn.skypack.dev/simpler-react-responsive';
</script>

README

simpler-react-responsive

npm npm bundle size NPM
npm

Even simpler usage of react-responsive package!
Display elements after the device width surpass a breakpoint, like with ordinary CSS media-queries but in React 🤯

Install

npm install simpler-react-responsive

Example

import React from 'react';
import {
  Mobile,
  Tablet,
  Laptop,
} from 'simpler-react-responsive';


export const MyComponent = (props) => {
  return (
    <div>
      <Mobile andSmaller>
        Display on Mobile and smaller (0px - 425px)
      </Mobile>

      <Mobile>
        Display on Mobile exactly (321px - 425px)
      </Mobile>

      <Mobile andLarger>
        Display on Mobile and larger (321px - infinity)
      </Mobile>

      <Tablet andSmaller>
        Display on Tablet and smaller (0px - 768px)
      </Tablet>

      <Tablet>
        Display on Tablet exactly (426px - 768px)
      </Tablet>

      <Tablet andLarger>
        Display on Tablet and larger (426px - infinity)
      </Tablet>

      <Laptop andSmaller>
        Display on Laptop and smaller (0px - 1024px)
      </Laptop>

      <Laptop>
        Display on Laptop exactly (769px - 1024px)
      </Laptop>

      <Laptop andLarger>
        Display on Laptop and larger (769px - infinity)
      </Laptop>
    </div>
  );
};

Author

Maxim Marchuk

Contacts

Email: maxim.marchuk.d.corp@gmail.com
Twitter: https://twitter.com/MaximMarchuk

License

MIT