react-responsive-tools 1.0.1 → 1.1.2

package/README.MD

@@ -496,3 +496,6 @@ const MyComponent = () => (
   </ForDF>
 );
 ```
+
+
+

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "react-responsive-tools",
-  "version": "1.0.1",
+  "version": "1.1.2",
   "description": "",
   "main": "index.js",
   "module": "index.js",
   "types": "index.d.ts",
   "scripts": {
     "dev": "webpack --mode development --watch",
-    "build": "npm run generate-breakpoints && tsc && webpack --mode production",
     "tsc": "tsc",
     "test": "jest",
     "lint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
     "lint-fix": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\" --fix",
-    "generate-breakpoints": "node loadBreakpoints.js",
-    "postinstall": "npm run generate-breakpoints"
+
+    "build": "tsc && webpack --mode production"
+
   },
   "files": [
     "src",
@@ -31,7 +31,6 @@
   "author": "westprophet",
   "license": "ISC",
   "dependencies": {
-    "classnames": "^2.5.1",
     "react-responsive": "^10.0.0"
   },
   "devDependencies": {

package/src/components/horizontal.tsx

@@ -3,7 +3,7 @@
  */
 
 import { TBreakpoint } from '../interfaces/TBreakpoint';
-import { useBreakpointDF, useBreakpointMF } from '../hooks/horizontal/useBreakpoint';
+import { useBreakpointDF, useBreakpointMF } from '../hooks/useBreakpoint';
 
 interface Props {
   children: any;

package/src/default.scss

@@ -0,0 +1 @@
+@import "scss/breakpoints";

package/src/hooks/getCSSVariable.ts

@@ -0,0 +1,16 @@
+import {TBreakpoint, TVerticalBreakpoint} from "../interfaces/TBreakpoint";
+
+export function getCSSVariable(variableName: string) {
+  const root = document.documentElement;
+  const variableValue = getComputedStyle(root).getPropertyValue(variableName);
+  return variableValue.trim();
+}
+
+
+export function getCSSBreakpoint(bp: TBreakpoint) {
+  return getCSSVariable(`--bp-${bp}`)
+}
+
+export function getCSSVBreakpoint(bp: TVerticalBreakpoint) {
+  return getCSSVariable(`--vbp-${bp}`)
+}

package/src/hooks/{horizontal/useBreakpoint.test.ts → useBreakpoint.test.ts}

@@ -7,7 +7,7 @@
       useMediaQuery: jest.fn(),
     }));
 
-    jest.mock('../useVariant', () => jest.fn(() => 'min'));
+    jest.mock('./useVariant', () => jest.fn(() => 'min'));
 
     describe('useBreakpoint', () => {
       it('should return true for the media query that matches the breakpoint', () => {

package/src/hooks/{horizontal/useBreakpoint.ts → useBreakpoint.ts}

@@ -1,14 +1,15 @@
 import { useMediaQuery } from 'react-responsive';
 
 import breakpoints from '../../scss/_horizontal.export.scss';
-import { TBreakpoint } from '../../interfaces/TBreakpoint';
-import { TAdaptiveVariant } from '../../interfaces/TAdaptiveVariant';
-import useVariant from '../useVariant';
+import { TBreakpoint } from '../interfaces/TBreakpoint';
+import { TAdaptiveVariant } from '../interfaces/TAdaptiveVariant';
+import useVariant from './useVariant';
+import {getCSSBreakpoint} from "./getCSSVariable";
 
 export default function useBreakpoint(b: TBreakpoint | number, variant: TAdaptiveVariant = 'MtF') {
-  const p = typeof b === 'number' ? b :  breakpoints[b];
+  const _bp = typeof b === 'number' ? b + 'px' :  getCSSBreakpoint(b);
   const v = useVariant(variant);
-  return useMediaQuery({ query: `(${v}-width: ${p}px)` });
+  return useMediaQuery({ query: `(${v}-width: ${_bp})` });
 }
 
 export function useBreakpointMF(b: TBreakpoint | number) {

package/src/hooks/{vertical/useVBreakpoint.ts → useVBreakpoint.ts}

@@ -1,14 +1,14 @@
 import { useMediaQuery } from 'react-responsive';
 
-import breakpoints from '../../scss/_vertical.export.scss';
-import { TVerticalBreakpoint } from '../../interfaces/TBreakpoint';
-import { TAdaptiveVariant } from '../../interfaces/TAdaptiveVariant';
-import useVariant from '../useVariant';
+import { TVerticalBreakpoint } from '../interfaces/TBreakpoint';
+import { TAdaptiveVariant } from '../interfaces/TAdaptiveVariant';
+import useVariant from './useVariant';
+import {getCSSBreakpoint, getCSSVBreakpoint} from "./getCSSVariable";
 
 export default function useVBreakpoint(b: TVerticalBreakpoint | number, variant: TAdaptiveVariant = 'MtF') {
-  const p = typeof b === 'number' ? b :  breakpoints[b];
+  const _bp = typeof b === 'number' ? b + 'px' :  getCSSVBreakpoint(b);
   const v = useVariant(variant);
-  return useMediaQuery({ query: `(${v}-height: ${p}px)` });
+  return useMediaQuery({ query: `(${v}-height: ${_bp})` });
 }
 
 export function useVBreakpointMF(b: TVerticalBreakpoint | number) {

package/src/index.scss

@@ -1,4 +1,2 @@
-@import "scss/data";
 @import "scss/vertical";
 @import "scss/horizontal";
-

package/src/index.ts

@@ -3,11 +3,8 @@ import { TBreakpoint, TVerticalBreakpoint } from './interfaces/TBreakpoint';
 
 export * from 'react-responsive';
 
-export * from './hooks/horizontal/useBreakpoints';
-export * from './hooks/horizontal/useBreakpoint';
-
-export * from './hooks/vertical/useVBreakpoint';
-export * from './hooks/vertical/useVBreakpoints';
+export * from './hooks/useBreakpoint';
+export * from './hooks/useVBreakpoint';
 
 export type {
   TBreakpoints,

package/src/scss/_breakpoints.scss

@@ -0,0 +1,19 @@
+:root {
+  --bp-xs: 320px;
+  --bp-sm: 576px;
+  --bp-md: 768px;
+  --bp-lg: 992px;
+  --bp-lt: 1024px;
+  --bp-ltm: 1120px;
+  --bp-ltl: 1440px;
+  --bp-xl: 1920px;
+  --bp-xxl: 2560px;
+  --bp-qxl: 3840px;
+
+  --vbp-xs: 600px;
+  --vbp-sm: 800px;
+  --vbp-md: 1000px;
+  --vbp-lg: 1200px;
+  --vbp-xl: 1600px;
+  --vbp-xxl: 1920px;
+}

package/src/scss/_horizontal.scss

@@ -1,118 +1,116 @@
 
-@mixin mobile-first($breakpoint){
-  $breakpoint-value: map-get($horizontal-breakpoints, $breakpoint);
-  @media (min-width: #{$breakpoint-value}px) {
+@mixin mob-first($breakpoint){
+  @media (min-width: var(--bp-#{$breakpoint})) {
     @content;
   }
 }
 
-@mixin desktop-first($breakpoint){
-  $breakpoint-value: map-get($horizontal-breakpoints, $breakpoint);
-  @media (max-width: #{$breakpoint-value}px) {
+@mixin desk-first($breakpoint){
+  @media (max-width: var(--bp-#{$breakpoint})) {
     @content;
   }
 }
 
 
 @mixin m-xs(){
-  @include mobile-first(xs){
+  @include mob-first(xs){
     @content;
   }
 }
 @mixin m-sm(){
-  @include mobile-first(sm){
+  @include mob-first(sm){
     @content;
   }
 }
 @mixin m-md(){
-  @include mobile-first(md){
+  @include mob-first(md){
     @content;
   }
 }
 @mixin m-lg(){
-  @include mobile-first(lg){
+  @include mob-first(lg){
     @content;
   }
 }
 @mixin m-lt(){
-  @include mobile-first(lt){
+  @include mob-first(lt){
     @content;
   }
 }
 @mixin m-ltm(){
-  @include mobile-first(ltm){
+  @include mob-first(ltm){
     @content;
   }
 }
 @mixin m-ltl(){
-  @include mobile-first(ltl){
+  @include mob-first(ltl){
     @content;
   }
 }
 @mixin m-xl(){
-  @include mobile-first(xl){
+  @include mob-first(xl){
     @content;
   }
 }
 @mixin m-xxl(){
-  @include mobile-first(xxl){
+  @include mob-first(xxl){
     @content;
   }
 }
 @mixin m-qxl(){
-  @include mobile-first(qxl){
+  @include mob-first(qxl){
     @content;
   }
 }
 
 
 @mixin d-xs(){
-  @include desktop-first(xs){
+  @include desk-first(xs){
     @content;
   }
 }
 @mixin d-sm(){
-  @include desktop-first(sm){
+  @include desk-first(sm){
     @content;
   }
 }
 @mixin d-md(){
-  @include desktop-first(md){
+  @include desk-first(md){
     @content;
   }
 }
 @mixin d-lg(){
-  @include desktop-first(lg){
+  @include desk-first(lg){
     @content;
   }
 }
 @mixin d-lt(){
-  @include desktop-first(lt){
+  @include desk-first(lt){
     @content;
   }
 }
 @mixin d-ltm(){
-  @include desktop-first(ltm){
+  @include desk-first(ltm){
     @content;
   }
 }
 @mixin d-ltl(){
-  @include desktop-first(ltl){
+  @include desk-first(ltl){
     @content;
   }
 }
 @mixin d-xl(){
-  @include desktop-first(xl){
+  @include desk-first(xl){
     @content;
   }
 }
 @mixin d-xxl(){
-  @include desktop-first(xxl){
+  @include desk-first(xxl){
     @content;
   }
 }
 @mixin d-qxl(){
-  @include desktop-first(qxl){
+  @include desk-first(qxl){
     @content;
   }
 }

package/src/scss/_vertical.scss

@@ -1,76 +1,73 @@
-
-@mixin v-mobile-first($breakpoint){
-  $breakpoint-value: map-get($vertical-breakpoints, $breakpoint);
-  @media (min-height: #{$breakpoint-value}px) {
+@mixin v-mob-first($breakpoint){
+  @media (min-height: var(--bp-#{$breakpoint})) {
     @content;
   }
 }
 
-@mixin v-desktop-first($breakpoint){
-  $breakpoint-value: map-get($vertical-breakpoints, $breakpoint);
-  @media (max-height: #{$breakpoint-value}px) {
+@mixin v-desk-first($breakpoint){
+  @media (max-height: var(--bp-#{$breakpoint})) {
     @content;
   }
 }
 
 @mixin vm-xs(){
-  @include v-mobile-first(xs){
+  @include v-mob-first(xs){
     @content;
   }
 }
 @mixin vm-sm(){
-  @include v-mobile-first(sm){
+  @include v-mob-first(sm){
     @content;
   }
 }
 @mixin vm-md(){
-  @include v-mobile-first(md){
+  @include v-mob-first(md){
     @content;
   }
 }
 @mixin vm-lg(){
-  @include v-mobile-first(lg){
+  @include v-mob-first(lg){
     @content;
   }
 }
 @mixin vm-xl(){
-  @include v-mobile-first(xl){
+  @include v-mob-first(xl){
     @content;
   }
 }
 @mixin vm-xxl(){
-  @include v-mobile-first(xxl){
+  @include v-mob-first(xxl){
     @content;
   }
 }
 
 @mixin vd-xs(){
-  @include v-desktop-first(xs){
+  @include v-desk-first(xs){
     @content;
   }
 }
 @mixin vd-sm(){
-  @include v-desktop-first(sm){
+  @include v-desk-first(sm){
     @content;
   }
 }
 @mixin vd-md(){
-  @include v-desktop-first(md){
+  @include v-desk-first(md){
     @content;
   }
 }
 @mixin vd-lg(){
-  @include v-desktop-first(lg){
+  @include v-desk-first(lg){
     @content;
   }
 }
 @mixin vd-xl(){
-  @include v-desktop-first(xl){
+  @include v-desk-first(xl){
     @content;
   }
 }
 @mixin vd-xxl(){
-  @include v-desktop-first(xxl){
+  @include v-desk-first(xxl){
     @content;
   }
 }

package/src/scss/index.scss

@@ -1,4 +1,4 @@
-@import "data";
+@import "breakpoints";
 @import "vertical";
 @import "horizontal";
 

package/src/breakpoints.configs.js

@@ -1,25 +0,0 @@
-// breakpointConfig.js
-
-const HORIZONTAL_BREAKPOINTS = {
-  xs: '320px',
-  sm: '576px',
-  md: '768px',
-  lg: '992px',
-  lt: '1024px',
-  ltm: '1200px',
-  ltl: '1440px',
-  xl: '1920px',
-  xxl: '2560px',
-  qxl: '3840px',
-};
-
-const VERTICAL_BREAKPOINTS = {
-  xs: '600px',
-  sm: '800px',
-  md: '1000px',
-  lg: '1200px',
-  xl: '1600px',
-  xxl: '1601px',
-};
-
-export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS };

package/src/hooks/horizontal/useBreakpoints.ts

@@ -1,30 +0,0 @@
-import { useMediaQuery } from 'react-responsive';
-
-import breakpoints from '../../scss/_horizontal.export.scss';
-import { TBreakpoints } from '../../interfaces/TBreakpoints';
-import { TAdaptiveVariant } from '../../interfaces/TAdaptiveVariant';
-import useVariant from '../useVariant';
-
-export default function useBreakpoints(variant: TAdaptiveVariant = 'MtF'): TBreakpoints<boolean> {
-  const v = useVariant(variant);
-  return {
-    xs: useMediaQuery({ query: `(${v}-width: ${breakpoints.xs}px)` }),
-    sm: useMediaQuery({ query: `(${v}-width: ${breakpoints.sm}px)` }),
-    md: useMediaQuery({ query: `(${v}-width: ${breakpoints.md}px)` }),
-    lg: useMediaQuery({ query: `(${v}-width: ${breakpoints.lg}px)` }),
-    lt: useMediaQuery({ query: `(${v}-width: ${breakpoints.lt})px` }),
-    ltm: useMediaQuery({ query: `(${v}-width: ${breakpoints.ltm})px` }),
-    ltl: useMediaQuery({ query: `(${v}-width: ${breakpoints.ltl})px` }),
-    xl: useMediaQuery({ query: `(${v}-width: ${breakpoints.xl})px` }),
-    xxl: useMediaQuery({ query: `(${v}-width: ${breakpoints.xxl})px` }),
-    qxl: useMediaQuery({ query: `(${v}-width: ${breakpoints.qxl})px` }),
-  };
-}
-
-export function useBreakpointsMF(): TBreakpoints<boolean> {
-  return useBreakpoints('MtF');
-}
-
-export function useBreakpointsDF(): TBreakpoints<boolean> {
-  return useBreakpoints('DtF');
-}

package/src/hooks/vertical/useVBreakpoints.ts

@@ -1,26 +0,0 @@
-import { useMediaQuery } from 'react-responsive';
-
-import breakpoints from '../../scss/_vertical.export.scss';
-import { TVerticalBreakpoints } from '../../interfaces/TBreakpoints';
-import { TAdaptiveVariant } from '../../interfaces/TAdaptiveVariant';
-import useVariant from '../useVariant';
-
-export default function useVBreakpoints(variant: TAdaptiveVariant = 'MtF'): TVerticalBreakpoints<boolean> {
-  const v = useVariant(variant);
-  return {
-    xs: useMediaQuery({ query: `(${v}-height: ${breakpoints.xs}px)` }),
-    sm: useMediaQuery({ query: `(${v}-height: ${breakpoints.sm}px)` }),
-    md: useMediaQuery({ query: `(${v}-height: ${breakpoints.md}px)` }),
-    lg: useMediaQuery({ query: `(${v}-height: ${breakpoints.lg}px)` }),
-    xl: useMediaQuery({ query: `(${v}-height: ${breakpoints.xl})px` }),
-    xxl: useMediaQuery({ query: `(${v}-height: ${breakpoints.xxl})px` }),
-  };
-}
-
-export function useVBreakpointsMF(): TVerticalBreakpoints<boolean> {
-  return useVBreakpoints('MtF');
-}
-
-export function useVBreakpointsDF(): TVerticalBreakpoints<boolean> {
-  return useVBreakpoints('DtF');
-}

package/src/scss/_data.scss

@@ -1,24 +0,0 @@
-// _data.scss
-@import './custom-breakpoints';
-
-:export {
-  // Экспорт горизонтальных брейкпоинтов
-  xs: map-get($horizontal-breakpoints, xs);
-  sm: map-get($horizontal-breakpoints, sm);
-  md: map-get($horizontal-breakpoints, md);
-  lg: map-get($horizontal-breakpoints, lg);
-  lt: map-get($horizontal-breakpoints, lt);
-  ltm: map-get($horizontal-breakpoints, ltm);
-  ltl: map-get($horizontal-breakpoints, ltl);
-  xl: map-get($horizontal-breakpoints, xl);
-  xxl: map-get($horizontal-breakpoints, xxl);
-  qxl: map-get($horizontal-breakpoints, qxl);
-
-  // Экспорт вертикальных брейкпоинтов
-  vxs: map-get($vertical-breakpoints, xs);
-  vsm: map-get($vertical-breakpoints, sm);
-  vmd: map-get($vertical-breakpoints, md);
-  vlg: map-get($vertical-breakpoints, lg);
-  vxl: map-get($vertical-breakpoints, xl);
-  vxxl: map-get($vertical-breakpoints, xxl);
-}

package/src/scss/_horizontal.export.scss

@@ -1,14 +0,0 @@
-@import "data";
-
-:export{
-  xs:map-get($horizontal-breakpoints,xs);
-  sm:map-get($horizontal-breakpoints,sm);
-  md:map-get($horizontal-breakpoints,md);
-  lg:map-get($horizontal-breakpoints,lg);
-  lt:map-get($horizontal-breakpoints,lt);
-  ltm:map-get($horizontal-breakpoints,ltm);
-  ltl:map-get($horizontal-breakpoints,ltl);
-  xl:map-get($horizontal-breakpoints,xl);
-  xxl:map-get($horizontal-breakpoints,xxl);
-  qxl:map-get($horizontal-breakpoints,qxl);
-}

package/src/scss/_vertical.export.scss

@@ -1,10 +0,0 @@
-@import "data";
-
-:export{
-  xs: map-get($vertical-breakpoints, xs);
-  sm: map-get($vertical-breakpoints, sm);
-  md: map-get($vertical-breakpoints, md);
-  lg: map-get($vertical-breakpoints, lg);
-  xl: map-get($vertical-breakpoints, xl);
-  xxl: map-get($vertical-breakpoints, xxl);
-}