useAdaptivityConditionalRender

Хук возвращает расширенную версию параметров адаптивности, каждый из которых имеет дополнительную мета-информацию. Условия реализованы через CSS Media Query ↗.

Связанные страницы:

Когда использовать?

Используйте когда нужно показать или скрыть элемент интерфейса по тому или иному брейкпоинту.

API

Возвращаемое значение

Объект с адаптивными условиями:

Свойство	Тип	Описание
`density`	`Record<'compact' \| 'regular', false \| { className: string }>`	Условия для плотности интерфейса.
`viewWidth`	`Record<'smallTabletMinus' \| 'smallTabletPlus' \| 'tabletMinus' \| 'tabletPlus', false \| { className: string }>`	Условия для брейкпоинтов ширины экрана.
`deviceType`	`Record<'mobile' \| 'desktop', false \| { className: string }>`	Условия для типа устройства.
`sizeX`	`Record<'compact' \| 'regular', false \| { className: string }>`	Устаревшее поле. Используйте `density`.
`sizeY`	`Record<'compact' \| 'regular', false \| { className: string }>`	Устаревшее поле. Используйте `density`.

Особенности работы

Если вы переопределили адаптивность через AdaptivityProvider, то значение у каждого отдельного параметра адаптивности может быть двух типов:

false – мы строго задали какой-то из параметров адаптивности. Например, при <AdaptivityProvider viewWidth={ViewWidth.MOBILE}> значение viewWidth.tabletPlus будет false, т.к. мы говорим, что у нас всегда мобильный вид.
{ className: string } – в CSS-класс, который на основе CSS Media Query будет переключать видимость вашего элемента через display: none.

Пример использования

Показываем дополнительную колонку только для tabletPlus и применяем className из хука, чтобы условие работало через CSS Media Query.

useSnackbarManager

useAdaptivityWithJSMediaQueries