@necrobox/diamonds

alt="Set of diamonds"
src="./logo.png">


В этом репозитории хранится набор различных хелперов, которые когда-то пригодились нам в проектах,
и возможно ещё пригодятся в будущем.

Все хэлперы независимы друг от друга, а потому при импорте конкретных функций в итоговый бандл будут попадать только они,
а не вся библиотека.

Содержание

- Установка
- Список хэлперов
- base64ToUint8Array
- disableBodyScroll, enableBodyScroll
- camelToKebab
- colorize
- cookieStringToObject
- datauriToBlob
- debounce
- deepClone
- equals
- findLast
- formatBytes
- formatNumberString
- formatPhoneNumberString
- getBrowserScrollbarWidth
- getDisplayName
- getImageOrientation
- getObjectPath
- getPlural
- getRandomNum
- getUniqueId
- hexToRgb
- isElementInViewport
- isEmailValid
- isInputTypeSupported
- isMobile
- kebabToCamel
- objectToQueryString
- omit
- pick
- queryStringToObject
- rgbToHex
- shuffle
- sleep
- storage
- throttle
- Назначение
- Благодарности

Установка

Добавить пакет в зависимости:

``sh
npm install --save @necrobox/diamonds
`

Импортировать необходимые функции:

`js
import { getUniqueId } from '@necrobox/diamonds';
`

Список хэлперов

Вообще легче просто посмотреть исходный код хэлперов, ибо они достаточно маленькие. Но если нужно описание, то вот оно.

$3

Преобразует Base64-строку в Uint8Array.

$3

Первая функция отключает скролл на текущей страницы (с возможностью сохранения текущего местоположения),
а вторая возвращает всё как было, восстанавливая местоположение, если оно было сохранено.

Пригождается, когда нужно, например, отключить скролл при открытии сайдбара, а при закрытии включить.

$3

Переводит строку из camelCase в kebab-case.

$3

Приводит первый символ строки к верхнему регистру.

$3

Возвращает переданные параметры в виде строки с цветовыми тегами внутри.

Пригождается, когда нужно раскрасить логи в консоли.

$3

Превращает строку с куками (обычно, возвращаемую document.cookie) в объект.

$3

Конвертирует DataURI строку в объект Blob.

Пригождается, когда нужно отправить на сервер изображение, полученное из редактора на Canvas.

$3

Возвращает функцию, которая вызовет колбэк только через указанное количество времени,
прошедшее с момента последнего вызова этой функции.

Пригождается, когда нужно, например, повесить обработчик на скролл,
который вызовется только через N мс после завершения потока событий.

$3

Возвращает подробную копию переданного объекта. Не работает с циклическими ссылками.

Пригождается, когда нужно «глубоко» скопировать объект, т. к. просто Object.assign не подходит,
ибо создаёт только поверхностную копию, и если у объекта есть вложенные объекты, они не копируются, а линкуются.

$3

Производит «глубокое» сравнение двух переданных параметров.

$3

Возвращает значение последнего найденного в массиве элемента, которое удовлетворяет условию переданному в колбэке.
Или undefined, если такого элемента нет.

$3

Преобразует размер в байтах в KB, MB, GB и т. д.

$3

Форматирует число (или корректную строку с числом) по правилам русской типографики.

Пригождается, когда нужно отформатировать, например, стоимость чего-то.

$3

Форматирует число (или корректную строку с числом) по маске мобильных номеров телефонов РФ.

$3

Возвращает ширину скроллбара в браузере.

$3

Используется при формировании свойства
displayName
для HOC-компонентов в Реакте.

$3

Извлекает из EXIF информацию об ориентации изображения.

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

`js
getImageOrientation.call(this, image, orientation => {
let rotate;

switch (orientation) {
case 8:
rotate = 270;
break;
case 6:
rotate = 90;
break;
case 3:
rotate = 180;
break;
default:
rotate = 0;
}

this.setState({ rotate });
});
`

$3

Возвращает свойство из объекта по указанному «пути».

Пригождается, когда приходится работать с объектами с большой вложенностью,
и не хочется писать длинные условия.
getObjectPath(obj, 'key1.key2.key3') и готово.

$3

Выбирает и возвращает правильное название единиц для переданного числа.

Пригождается, когда в зависимости от числа нужно менять связанное с ним слово:
«1 день», «2 дня», «5 дней».

$3

Возвращает псевдослучайное число в указанном диапазоне.

$3

Возвращает строку сгенерированную по принципу «префикс-число»,
где префикс — это значение переданного параметра (или «id»),
а число каждый раз уникальное.

Пригождается, когда нужно, например, контролам на странице выдать уникальные ID,
чтобы связать их с лэйблами.

$3

Переводит строку с HEX-нотацией цвета в объект с RGB-нотацией.

$3

Возвращает true, если переданный элемент полностью
(или нет, в зависимости от переданного параметра) виден во вьюпорте пользователя.

$3

Возвращает true, если переданная строка — валидный адрес эл. почты.

$3

Проверяет поддержку браузером переданного значения атрибута type блока input.

Пригождается, когда нужно проверить, поддерживает ли браузер какой-то специфический тип input
(в старых или мобильных браузерах, например).

$3

Возвращает true, если по UA кажется, что браузер пользователя мобильный.

Пригождается, когда не нужна точная проверка (используемые внутри проверки довольно простые).

$3

Переводит строку из kebab-case в camelCase.

$3

Превращает объект, в котором значения ключей представлены примитивными типами или массивами
примитивных типов, в query-строку.

$3

Берёт передаваемый объект, и возвращает новый такой же, но без перечисленных ключей.

Типичный пример использования в Реакте: omit(this.props, 'mods', 'mix').

$3

Берёт передаваемый объект, и возвращает новый такой же,
но только с перечисленными ключами, опуская все остальные.

$3

Превращает query-строку в объект.

$3

Переводит объект с RGB-нотацией цвета в строку с HEX-нотацией.

$3

Перемешивает переданный массив и возвращает его.

$3

Возвращает Promise, который ждёт указанное количество миллисекунд прежде чем зарезолвиться.

$3

Предоставляет возможность безопасного использования localStorage.

$3

Превращает переданный колбэк в функцию, при вызове которой колбэк вызовется только в том случае,
если прошло указанное количество времени.

Пригождается, когда нужно, например, отправлять данные при скролле,
но делать это не мгновенно, а каждые N мс, чтобы не плодить кучу запросов.

Назначение

Когда разработчики работают над проектами, они используют большое количество маленьких функций, которые не связаны
с проектом контекстуально. Обычно такие функции хранятся в папках вроде utils или helpers`.

Чтобы избавиться от копи-паста таких функций из проекта в проект, мы создали этот пакет.

Все функции, что в нём лежат, не нацелены на то, чтобы быть абсолютно готовыми к непредвиденному использованию.
Они делают то, что заявлено, так, как заявлено, и ничего сверх.

Благодарности

Клёвую картинку для репозитория нарисовал Игорь Гарибальди.