chores:

- add custom media query utility with js
- update readme

Author: SL0TR

README.md

@@ -23,6 +23,7 @@
 - :chart_with_upwards_trend: Redux and Redux Saga but with less boilerplate
   - Redux Toolkit configured with React Redux and Redux Saga for very little boilerplate
   - React Redux Hooks used for even more clean code
+  - React Persist configured for easier localstorage integration
 - :blue_heart: Ant Design
   - Configurable Ant theme variables out of the box
   - Localized Ant Design Component for better multilingual support
@@ -66,8 +67,6 @@ $ yarn build
 
 ```
 
-Note: If you're using Linux Bash for Windows, [see this guide](https://www.howtogeek.com/261575/how-to-run-graphical-linux-desktop-applications-from-windows-10s-bash-shell/) or use `node` from the command prompt.
-
 ## Credits
 
 This software uses the following open source packages:
@@ -79,7 +78,7 @@ This software uses the following open source packages:
 - [Redux Saga](https://redux-saga.js.org/)
 - [React Intl](https://formatjs.io/docs/react-intl/)
 - [React Router](https://reactrouter.com/)
-- [React Router](https://www.axios.com/)
+- [Axios](https://www.axios.com/)
 - And more..
 
 ## License

src/styles/utilities/index.js

@@ -0,0 +1 @@
+export { breakpoints, media, isScreenSize } from './media-query';

src/styles/utilities/media-query.js

@@ -0,0 +1,21 @@
+// MEDIA QUERY WITH JS ;)
+export const breakpoints = {
+  xs: 480,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600,
+};
+export const media = key => style =>
+  `@media (${key === 'xs' || key === 'sm' ? 'max-width' : 'min-width'}: ${
+    breakpoints[key]
+  }px) { ${style} }`;
+
+export const isScreenSize = key => {
+  if (key === 'xs' || key === 'sm') {
+    return window.innerWidth <= breakpoints[key];
+  }
+
+  return window.innerWidth >= breakpoints[key];
+};