react-responsive-tools 1.1.3 → 1.1.5

package/README.MD

@@ -1,182 +1,137 @@
-# react-adaptable-scss: Adaptive SCSS Tools
+# react-responsive-tools
 
-This project provides tools and configurations to simplify writing adaptive code for both vertical and horizontal layouts.
+This project provides tools and configurations to simplify writing responsive code for both vertical and horizontal layouts.
 
-## Project Structure
-
-The project includes the `scss` directory with the following files:
-- `_data.scss`: Contains breakpoints.
-- `_horizontal.scss` and `_vertical.scss`: Provide mixins for horizontal and vertical layouts, respectively.
-- `_screen.scss`: An intermediate file for JS export.
-- `_export.module.scss`: A file meant for explicit JS export.
-
-The `hooks` directory includes:
-- `useBreakpoint.ts`: Implements the `useBreakpoint` hook for identifying the current breakpoint.
-- `useBreakpoints.ts`: Implements the `useBreakpoints` hook for retrieving the list of currently active breakpoints.
-- `useVBreakpoint.ts`: Implements the `useVBreakpoint` hook for identifying the current vertical breakpoint.
-- `useVBreakpoints.ts`: Implements the `useVBreakpoints` hook for retrieving the list of currently active vertical breakpoints.
-
-The `components` directory includes:
-- `ForMF.ts`: A utility component that takes breakpoint size and children as props. It uses the `useBreakpointMF` hook to determine if the display size matches the given breakpoint. If so, it renders the children; otherwise, it renders `null`.
-- `ForDF.ts`: Similar to `ForMF`, but uses the `useBreakpointDF` hook.
-
-## Breakpoints
-
-We use a set of fixed variables for different screen sizes: `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, and `xxxl`.
-
-## Mixins Application
-
-Mixins are bundled with the `include` decorator, providing descriptive statements for breakpoints based on them.
-
-## Hooks
-
-The project incorporates the following hooks based on `react-responsive` for use in React.js:# react-adaptable-scss: Adaptive SCSS Tools
-
-This project provides tools and configurations to simplify writing adaptive code for both vertical and horizontal layouts.
-
-## Project Structure
-
-The project includes the `scss` directory with the following files:
-- `_data.scss`: Contains breakpoints.
-- `_horizontal.scss` and `_vertical.scss`: Provide mixins for horizontal and vertical layouts, respectively.
-- `_screen.scss`: An intermediate file for JS export.
-- `_export.module.scss`: A file meant for explicit JS export.
+The package is based on the npm package [react-responsive](https://www.npmjs.com/package/react-responsive) for use in React.js. It assumes the use of scss for compilation.
 
-The `hooks` directory includes:
-- `useBreakpoint.ts`: Implements the `useBreakpoint` hook for identifying the current breakpoint.
-- `useBreakpoints.ts`: Implements the `useBreakpoints` hook for retrieving the list of currently active breakpoints.
-- `useVBreakpoint.ts`: Implements the `useVBreakpoint` hook for identifying the current vertical breakpoint.
-- `useVBreakpoints.ts`: Implements the `useVBreakpoints` hook for retrieving the list of currently active vertical breakpoints.
+In the future, the dependency on scss will be removed.
 
-The `components` directory includes:
-- `ForMF.ts`: A utility component that takes breakpoint size and children as props. It uses the `useBreakpointMF` hook to determine if the display size matches the given breakpoint. If so, it renders the children; otherwise, it renders `null`.
-- `ForDF.ts`: Similar to `ForMF`, but uses the `useBreakpointDF` hook.
+## Installation
 
-## Breakpoints
+To install the project, run the following command:
 
-We use a set of fixed variables for different screen sizes.
+```sh
+# Using Yarn
+yarn add react-responsive-tools
 
-### Horizontal Breakpoints (default):
-
-```ecmascript 6
-const horizontalBreakpoints = {
-  xs: '320px',
-  sm: '576px',
-  md: '768px',
-  lg: '992px',
-  lt: '1024px',
-  ltm: '1200px',
-  ltl: '1440px',
-  xl: '1920px',
-  xxl: '2560px',
-  qxl: '3840px',
-};
+# Using npm
+npm install react-responsive-tools
 ```
 
-### Vertical Breakpoints (default):
+To initialize the tools, you need to import the file from the library:
 
-```ecmascript 6
-const verticalBreakpoints = {
-  xs: '600px',
-  sm: '800px',
-  md: '1000px',
-  lg: '1200px',
-  xl: '1600px',
-  xxl: '1601px',
-};
+```scss
+@import "react-responsive-tools/default"; // init breakpoints
 ```
 
-## Mixins Application
+This line imports the necessary CSS variables (breakpoints) required for the tools to work.
 
-Mixins are bundled with the `include` decorator, providing descriptive statements for breakpoints based on them.
-
-## Hooks
+The package also includes a file to reset browser styles:
 
-The project incorporates the following hooks based on `react-responsive` for use in React.js:
-- `useBreakpoints`: Retrieve current screen breakpoints.
-- `useBreakpoint`: Retrieve the current breakpoint.
-
-## Components
+```scss
+@import "react-responsive-tools/reset"; // reset browsers styles
+```
 
-The project includes utility components to display content only at certain breakpoints.
+### Default Horizontal and Vertical Breakpoints:
+
+--vbp - vertical breakpoints
+
+--bp - horizontal breakpoints
+
+```scss
+: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;
+}
+```
 
-## Future Growth Perspectives
+Breakpoints override example:
 
-We aim to add the following functionalities:
-- Redefining SCSS variables.
-- Configuring breakpoint names.
-- Separate breakpoint configurations for vertical layout.
-- Integration with the external library `react-responsive# react-adaptable-scss: Adaptive SCSS Tools
+```scss
+@import "react-responsive-tools/default"; // init breakpoints
 
-This project provides tools and configurations to simplify writing adaptive code for both vertical and horizontal layouts.
+:root {
+  //--bp-xxl: 2560px;
+  --bp-xxl: 2222px; // new point
+}
+```
 
-## Project Structure
+## Using Mixins
 
-The project includes the `scss` directory with the following files:
-- `_data.scss`: Contains breakpoints.
-- `_horizontal.scss` and `_vertical.scss`: Provide mixins for horizontal and vertical layouts, respectively.
-- `_screen.scss`: An intermediate file for JS export.
-- `_export.module.scss`: A file meant for explicit JS export.
+Mixins are packaged with an `include` decorator that provides descriptive instructions for breakpoints.
 
-The `hooks` directory includes:
-- `useBreakpoint.ts`: Implements the `useBreakpoint` hook for identifying the current breakpoint.
-- `useBreakpoints.ts`: Implements the `useBreakpoints` hook for retrieving the list of currently active breakpoints.
-- `useVBreakpoint.ts`: Implements the `useVBreakpoint` hook for identifying the current vertical breakpoint.
-- `useVBreakpoints.ts`: Implements the `useVBreakpoints` hook for retrieving the list of currently active vertical breakpoints.
+Example:
 
-The `components` directory includes:
-- `ForMF.ts`: A utility component that takes breakpoint size and children as props. It uses the `useBreakpointMF` hook to determine if the display size matches the given breakpoint. If so, it renders the children; otherwise, it renders `null`.
-- `ForDF.ts`: Similar to `ForMF`, but uses the `useBreakpointDF` hook.
+```scss
+@import "react-responsive-tools";
 
-## Breakpoints
+div.supercool {
+  @include m-xs { // for mobile to first xs breakpoint
+    color: red;
+    font-size: 10px;
+    @include vm-sm {
+      font-size: 11px;
+    }
+    @include vm-md {
+      font-size: 14px;
+    }
+  }
+}
 
-We use a set of fixed variables for different screen sizes.
+span.someclass {
+  @include d-xxl { // for desktop to first xxl breakpoint
+    color: white;
+    // vertical points in horizontal 
+    @include vd-xs {
+      font-size: 10px;
+    }
+    @include vd-md {
+      font-size: 12px;
+    }
+  }
+}
 
-### Horizontal Breakpoints (default):
+aside.sidebar {
+  // custom breakpoint
+  @include mob-first(xs) {
+    ...
+  }
+  // desktop to first
+  @include desk-first(md) {
+    ...
+  }
 
-```typescript
-const horizontalBreakpoints = {
-  xs: '320px',
-  sm: '576px',
-  md: '768px',
-  lg: '992px',
-  lt: '1024px',
-  ltm: '1200px',
-  ltl: '1440px',
-  xl: '1920px',
-  xxl: '2560px',
-  qxl: '3840px',
-};
-```
+  // vertical custom bp
+  @include v-desk-first(md) {
 
-### Vertical Breakpoints (default):
+  }
+  // mob first
+  @include v-mob-first(md) {
 
-```typescript
-const verticalBreakpoints = {
-  xs: '600px',
-  sm: '800px',
-  md: '1000px',
-  lg: '1200px',
-  xl: '1600px',
-  xxl: '1601px',
-};
+  }
+}
 ```
 
-## Mixins Application
-
-Mixins are bundled with the `include` decorator, providing descriptive statements for breakpoints based on them.
-
 ## Hooks
 
-The project incorporates the following hooks based on `react-responsive` for use in React.js:
-- `useBreakpoints`: Retrieve current screen breakpoints.
-- `useBreakpoint`: Retrieve the current breakpoint.
-- `useBreakpointMF`: Retrieve the current breakpoint for "MtF" variant.
-- `useBreakpointDF`: Retrieve the current breakpoint for "MtF" variant.
-
 ### Hook Implementations
 
-#### useBreakpoint Hook:
+#### Hook `useBreakpoint`:
 
 ```typescript
 import { useMediaQuery } from 'react-responsive';
@@ -186,83 +141,67 @@ import { TAdaptiveVariant } from '../../interfaces/TAdaptiveVariant';
 import useVariant from '../useVariant';
 
 export default function useBreakpoint(b: TBreakpoint, variant: TAdaptiveVariant = 'MtF') {
-  const p = breakpoints[b];
-  const v = useVariant(variant);
-  return useMediaQuery({ query: `(${v}-width: ${p}px)` });
+    const p = breakpoints[b];
+    const v = useVariant(variant);
+    return useMediaQuery({ query: `(${v}-width: ${p}px)` });
 }
 
 export function useBreakpointMF(b: TBreakpoint) {
-  return useBreakpoint(b, 'MtF');
+    return useBreakpoint(b, 'MtF');
 }
 
 export function useBreakpointDF(b: TBreakpoint) {
-  return useBreakpoint(b, 'DtF');
+    return useBreakpoint(b, 'DtF');
 }
 ```
 
-### Usage Examples:
+### Usage Examples
 
-#### useBreakpoint Hook:
+#### Hook `useBreakpoint`:
 
 ```typescript
 import useBreakpoint from './hooks/useBreakpoint';
 
 const MyComponent = () => {
-  const isMedium = useBreakpoint('md');
-
-  return (
-    <div>
-      {isMedium && <p>The current breakpoint is Medium (md)</p>}
-    </div>
-  );
-};
-```
-
-#### useBreakpoints Hook:
-
-```typescript
-import { useBreakpoints } from './hooks/useBreakpoints';
-
-const MyComponent = () => {
-  const breakpoints = useBreakpoints();
+    const isMedium = useBreakpoint('md');
 
-  return (
-    <div>
-      {breakpoints.includes('lg') && <p>The Large (lg) breakpoint is active</p>}
-    </div>
-  );
+    return (
+        <div>
+            {isMedium && <p>Current breakpoint: Medium (md)</p>}
+        </div>
+    );
 };
 ```
 
-#### useBreakpointMF Hook:
+#### Hook `useBreakpointMF`:
 
 ```typescript
 import { useBreakpointMF } from './hooks/useBreakpoint';
 
 const MyComponent = () => {
-  const isMedium = useBreakpointMF('md');
+    const isMedium = useBreakpointMF('md');
 
-  return (
-    <div>
-      {isMedium && <p>The current breakpoint is Medium (md) for Mobile First</p>}
-    </div>
-  );
+    return (
+        <div>
+            {isMedium && <p>Current breakpoint: Medium (md) for Mobile First</p>}
+        </div>
+    );
 };
 ```
 
-#### useBreakpointDF Hook:
+#### Hook `useBreakpointDF`:
 
 ```typescript
 import { useBreakpointDF } from './hooks/useBreakpoint';
 
 const MyComponent = () => {
-  const isLarge = useBreakpointDF('lg');
+    const isLarge = useBreakpointDF('lg');
 
-  return (
-    <div>
-      {isLarge && <p>The current breakpoint is Large (lg) for Desktop First</p>}
-    </div>
-  );
+    return (
+        <div>
+            {isLarge && <p>Current breakpoint: Large (lg) for Desktop First</p>}
+        </div>
+    );
 };
 ```
 
@@ -270,232 +209,58 @@ const MyComponent = () => {
 
 The project includes utility components to display content only at certain breakpoints.
 
-### Usage Examples:
+### Usage Examples
 
-#### ForMF Component:
+#### Component `ForMF`:
 
 ```typescript
 import { ForMF } from './components/ForMF';
 
 const MyComponent = () => (
-  <ForMF bp='md'>
-    <p>This content is only visible at the Medium (md) breakpoint</p>
-  </ForMF>
-);
-```
-# react-adaptable-scss: Adaptive SCSS Tools
-
-This project provides tools and configurations to simplify writing adaptive code for both vertical and horizontal layouts.
-
-## Project Structure
-
-The project includes the `scss` directory with the following files:
-- `_data.scss`: Contains breakpoints.
-- `_horizontal.scss` and `_vertical.scss`: Provide mixins for horizontal and vertical layouts, respectively.
-- `_screen.scss`: An intermediate file for JS export.
-- `_export.module.scss`: A file meant for explicit JS export.
-
-The `hooks` directory includes:
-- `useBreakpoint.ts`: Implements the `useBreakpoint` hook for identifying the current breakpoint.
-- `useBreakpoints.ts`: Implements the `useBreakpoints` hook for retrieving the list of currently active breakpoints.
-- `useVBreakpoint.ts`: Implements the `useVBreakpoint` hook for identifying the current vertical breakpoint.
-- `useVBreakpoints.ts`: Implements the `useVBreakpoints` hook for retrieving the list of currently active vertical breakpoints.
-
-The `components` directory includes:
-- `ForMF.ts`: A utility component that takes breakpoint size and children as props. It uses the `useBreakpointMF` hook to determine if the display size matches the given breakpoint. If so, it renders the children; otherwise, it renders `null`.
-- `ForDF.ts`: Similar to `ForMF`, but uses the `useBreakpointDF` hook.
-
-## Breakpoints
-
-We use a set of fixed variables for different screen sizes.
-
-### Horizontal Breakpoints (default):
-
-```typescript
-const horizontalBreakpoints = {
-  xs: '320px',
-  sm: '576px',
-  md: '768px',
-  lg: '992px',
-  lt: '1024px',
-  ltm: '1200px',
-  ltl: '1440px',
-  xl: '1920px',
-  xxl: '2560px',
-  qxl: '3840px',
-};
-```
-
-### Vertical Breakpoints (default):
-
-```typescript
-const verticalBreakpoints = {
-  xs: '600px',
-  sm: '800px',
-  md: '1000px',
-  lg: '1200px',
-  xl: '1600px',
-  xxl: '1601px',
-};
-```
-
-## Mixins Application
-
-Mixins are bundled with the `include` decorator, providing descriptive statements for breakpoints based on them.
-
-## Hooks
-
-The project incorporates the following hooks based on `react-responsive` for use in React.js:
-- `useBreakpoints`: Retrieve current screen breakpoints.
-- `useBreakpoint`: Retrieve the current breakpoint.
-- `useBreakpointMF`: Retrieve the current breakpoint for "Mobile to First" variant.
-- `useBreakpointDF`: Retrieve the current breakpoint for "Desktop to First" variant.
-
-### Hook Implementations
-
-### Usage Examples:
-
-#### useBreakpoint Hook with Predefined Breakpoints:
-
-```typescript
-import useBreakpoint from './hooks/useBreakpoint';
-
-const MyComponent = () => {
-  const isMedium = useBreakpoint('md');
-
-  return (
-    <div>
-      {isMedium && <p>The current breakpoint is Medium (md)</p>}
-    </div>
-  );
-};
-```
-
-#### useBreakpoint Hook with Custom Size:
-
-```typescript
-import useBreakpoint from './hooks/useBreakpoint';
-
-const MyComponent = () => {
-  const isCustomSize = useBreakpoint(850);
-
-  return (
-    <div>
-      {isCustomSize && <p>The current breakpoint is Custom (850px)</p>}
-    </div>
-  );
-};
-```
-
-#### useBreakpoints Hook:
-
-```typescript
-import { useBreakpoints } from './hooks/useBreakpoints';
-
-const MyComponent = () => {
-  const breakpoints = useBreakpoints();
-
-  return (
-    <div>
-      {breakpoints.includes('lg') && <p>The Large (lg) breakpoint is active</p>}
-    </div>
-  );
-};
-```
-
-#### useBreakpointMF Hook:
-
-```typescript
-import { useBreakpointMF } from './hooks/useBreakpoint';
-
-const MyComponent = () => {
-  const isMedium = useBreakpointMF('md');
-
-  return (
-    <div>
-      {isMedium && <p>The current breakpoint is Medium (md) for Mobile First</p>}
-    </div>
-  );
-};
-```
-
-#### useBreakpointDF Hook:
-
-```typescript
-import { useBreakpointDF } from './hooks/useBreakpoint';
-
-const MyComponent = () => {
-  const isLarge = useBreakpointDF('lg');
-
-  return (
-    <div>
-      {isLarge && <p>The current breakpoint is Large (lg) for Desktop First</p>}
-    </div>
-  );
-};
-```
-
-## Components
-
-The project includes utility components to display content only at certain breakpoints.
-
-### Usage Examples:
-
-#### ForMF Component:
-
-```typescript
-import { ForMF } from './components/ForMF';
-
-const MyComponent = () => (
-  <ForMF bp='md'>
-    <p>This content is only visible at the Medium (md) breakpoint</p>
-  </ForMF>
+    <ForMF bp='md'>
+        <p>This content is visible only at the Medium (md) breakpoint</p>
+    </ForMF>
 );
 
 const CustomSizeComponent = () => (
-  <ForMF bp={850}>
-    <p>This content is only visible at the Custom size (850px) breakpoint</p>
-  </ForMF>
+    <ForMF bp={850}>
+        <p>This content is visible only at the Custom (850px) breakpoint</p>
+    </ForMF>
 );
 ```
 
-#### ForDF Component:
+#### Component `ForDF`:
 
 ```typescript
 import { ForDF } from './components/ForDF';
 
 const MyComponent = () => (
-  <ForDF bp='lg'>
-    <p>This content is only visible at the Large (lg) breakpoint</p>
-  </ForDF>
+    <ForDF bp='lg'>
+        <p>This content is visible only at the Large (lg) breakpoint</p>
+    </ForDF>
 );
 
 const CustomSizeComponent = () => (
-  <ForDF bp={1200}>
-    <p>This content is only visible at the Custom size (1200px) breakpoint</p>
-  </ForDF>
+    <ForDF bp={1200}>
+        <p>This content is visible only at the Custom (1200px) breakpoint</p>
+    </ForDF>
 );
 ```
 
-## Future Growth Perspectives
+## Project Structure
 
-We aim to add the following functionalities:
-- Redefining SCSS variables.
-- Configuring breakpoint names.
-- Separate breakpoint configurations for vertical layout.
-- Integration with the external library `react-responsive`.
-- Addition of WebStorm live templates for quick layout designs.
-#### ForDF Component:
+The project includes the `scss` directory with the following files:
 
-```typescript
-import { ForDF } from './components/ForDF';
+- `_data.scss`: Contains breakpoints.
+- `_horizontal.scss` and `_vertical.scss`: Provide mixins for horizontal and vertical layouts, respectively.
+- `_screen.scss`: Intermediate file for export to JS.
 
-const MyComponent = () => (
-  <ForDF bp='lg'>
-    <p>This content is only visible at the Large (lg) breakpoint</p>
-  </ForDF>
-);
-```
+The `hooks` directory includes:
 
+- `useBreakpoint.ts`: Implements the `useBreakpoint` hook to determine the current breakpoint.
+- `useVBreakpoint.ts`: Implements the `useVBreakpoint` hook to determine the current vertical breakpoint.
 
+The `components` directory includes:
 
+- `ForMF.ts`: A utility component that takes a breakpoint size and children as props. It uses the `useBreakpointMF` hook to determine if the screen size matches the given breakpoint. If it does, it renders the children; otherwise, it renders `null`.
+- `ForDF.ts`: Similar to `ForMF`, but uses the `useBreakpointDF` hook.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-tools",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "",
   "main": "index.js",
   "module": "index.js",
@@ -30,7 +30,7 @@
   ],
   "author": "westprophet",
   "license": "ISC",
-  "dependencies": {
+  "peerDependencies": {
     "react-responsive": "^10.0.0"
   },
   "devDependencies": {