# react-responsive-tools-scss

> Это инструменты и некоторые конфигурации созданные для упрощения написания адаптивного кода в двух плоскостях

Latest version **0.1.12** (published 2023-05-15) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-responsive-tools-scss
pnpm add react-responsive-tools-scss
yarn add react-responsive-tools-scss
bun add react-responsive-tools-scss
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.12 |
| Published | 2023-05-15 |
| First published | 2023-05-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 21 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | westprophet |
| Maintainers | westprophet |
| Keywords | react, typescript, scss-tools, react-responsive |

## Links

- npm: https://www.npmjs.com/package/react-responsive-tools-scss
- npm.io page: https://npm.io/package/react-responsive-tools-scss

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [react-responsive](https://npm.io/package/react-responsive.md) ^9.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.12 (latest) — 2023-05-15
- 0.1.11 — 2023-05-15
- 0.1.10 — 2023-05-14
- 0.1.9 — 2023-05-14
- 0.1.8 — 2023-05-14
- 0.1.7 — 2023-05-14
- 0.1.6 — 2023-05-14
- 0.1.5 — 2023-05-14
- 0.1.4 — 2023-05-13
- 0.1.3 — 2023-05-13
- 0.1.2 — 2023-05-13
- 0.1.1 — 2023-05-13
- 0.1.0 — 2023-05-03

## README

# Adaptive Tools SCSS

Это инструменты и некоторые конфигурации созданные для упрощения написания адаптивного кода в двух плоскостях

## Структура

В папке **scss** так лежат файлы

- `_data.scss` - брейкпоинты
- `_horizontal.scss` - миксины для работы с горизонтальной версткой
- `_screen.scss` - промежуточный файл для экспорта в js
- `_vertical.scss` - миксины для работы с вертикальной версткой
- `_export.module.scss` - файл для чистого экспорта в js

## Брейкпоинты

Намеренно фиксированный набор переменных под разные экраны

Зарегистрированные размеры:

```ts
type TBreakpointSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
```

```scss
// Extra Small tablets and large smartphones (landscape view)
$xxs: 320;

// Small tablets and large smartphones (landscape view)
$xs: 380;

// Small tablets and large smartphones (landscape view)
$sm: 576;

// Small tablets (portrait view)
$md: 768;

// Tablets and small desktops
$lg: 992;

// Large tablets and medium desktops
$xl: 1200;

// Large desktops
$xxl: 1400;

// Extra Large desktops
$fxl: 1550;

// Full Extra large desktops
$qxl: 1920;

// Ultra  large desktops
$uxl: 2540;

// Extra Ultra desktops
$euxl: 4096;

```

## Применение миксинов

Схема работы:

```scss
    @include
[? vh

]
-
[for | before]

-
[breakpoint] {
  //...
}
```

Где:

- [vh?] - вертикальная ориентация (если не указано то горизонтальная)
- [for | before] - mobile to first или desktop to first
- [breakpoint] - cам брейкпоинт типа `TBreakpointSize`

```scss
    @import 'react-adatptive-tools-scss';

@include for-md {
  width: 20px;
  //...
}

@include for-lg {
  //...
}

@include before-lg {
  //...
}

@include before-xs {
  //...
}

@include vh-before-sm {
  //...
}

@include vh-for-sm {
  //...
}
```

## Хук useBreakpoints

Основан на [react-responsive](https://www.npmjs.com/package/react-responsive)

Так же на борту есть:
`useBreakpoints` - хук который вытягивает текущие брейкпоинты экрана для работы в react.js

Example:

```tsx
    const b = useBreakpoints(); //get breakpoints
if (b?.xs || b['xxl']) { //check breackpoints 
    //...
}
//...
return (
    <div>
        <h1>{title}</h1>
        {/*conditional render*/}
        {b?.sm && <h2>{subtitle}</h2>}
    </div>
)

```

> Хук работает при SSR

## Компоненты

Так же для удобства выведены некоторые компоненты
Которые показывают содержимое только на определенных эндпоинтах
КОмпоненты очень просты в использовании

> For, ForXS, ForSM, ForLG, ForXXXL ...



Пример:

```tsx
    <For size="lg">  {/* size: TBreakpointSize*/}
        <ProfileButton/>
    </For>
    <ForLG>
        <ProfileButton/>
    </ForLG>
    
    <ForXS>
        <ProfileButton/>
    </ForXS>

    //...

    <Before size="lg">  {/* size: TBreakpointSize*/}
        <ProfileButton/>
    </Before>

    <BeforeXS>
        <ProfileButton/>
    </BeforeXS>
    

```

## Перспектива роста

В будущем хотелось бы добавить возможность:

- переопределять переменные **scss**
- конфигурировать название брейкпоинтов?
- отдельная конфигурация брейкпоинтов под вертикальную верстку
- вывести библиотеку react-responsive для кастомного использования в рамках одного пакета
- добавление шаблонов `live templates` под **`webstorm`** для молнейносной верстки
-

---
_Source: https://npm.io/package/react-responsive-tools-scss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._