В этом репозитории хранится набор различных хелперов, которые когда-то пригодились нам в проектах, и возможно ещё пригодятся в будущем.
Все хэлперы независимы друг от друга, а потому при импорте конкретных функций в итоговый бандл будут попадать только они, а не вся библиотека.
- Назначение
- Установка
- Список хэлперов
- 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
- Благодарности
Когда разработчики работают над проектами, они используют большое количество маленьких функций, которые не связаны
с проектом контекстуально. Обычно такие функции хранятся в папках вроде utils или helpers.
Чтобы избавиться от копи-паста таких функций из проекта в проект, мы создали этот пакет.
Все функции, что в нём лежат, не нацелены на то, чтобы быть абсолютно готовыми к непредвиденному использованию. Они делают то, что заявлено, так, как заявлено, и ничего сверх.
Добавить пакет в зависимости:
npm install --save @funboxteam/diamonds Импортировать необходимые функции:
import { getUniqueId } from '@funboxteam/diamonds';Вообще легче просто посмотреть исходный код хэлперов, ибо они достаточно маленькие. Но если нужно описание, то вот оно.
Преобразует Base64-строку в Uint8Array.
Первая функция отключает скролл на текущей страницы (с возможностью сохранения текущего местоположения), а вторая возвращает всё как было, восстанавливая местоположение, если оно было сохранено.
Пригождается, когда нужно, например, отключить скролл при открытии сайдбара, а при закрытии включить.
Переводит строку из camelCase в kebab-case.
Приводит первый символ строки к верхнему регистру.
Возвращает переданные параметры в виде строки с цветовыми тегами внутри.
Пригождается, когда нужно раскрасить логи в консоли.
Превращает строку с куками (обычно, возвращаемую document.cookie) в объект.
Конвертирует DataURI строку в объект Blob.
Пригождается, когда нужно отправить на сервер изображение, полученное из редактора на Canvas.
Возвращает функцию, которая вызовет колбэк только через указанное количество времени, прошедшее с момента последнего вызова этой функции.
Пригождается, когда нужно, например, повесить обработчик на скролл, который вызовется только через N мс после завершения потока событий.
Возвращает подробную копию переданного объекта. Не работает с циклическими ссылками.
Пригождается, когда нужно «глубоко» скопировать объект, т. к. просто Object.assign не подходит,
ибо создаёт только поверхностную копию, и если у объекта есть вложенные объекты, они не копируются, а линкуются.
Производит «глубокое» сравнение двух переданных параметров.
Возвращает значение последнего найденного в массиве элемента, которое удовлетворяет условию переданному в колбэке.
Или undefined, если такого элемента нет.
Преобразует размер в байтах в KB, MB, GB и т. д.
Форматирует число (или корректную строку с числом) по правилам русской типографики.
Пригождается, когда нужно отформатировать, например, стоимость чего-то.
Форматирует число (или корректную строку с числом) по маске мобильных номеров телефонов РФ.
Возвращает ширину скроллбара в браузере.
Используется при формировании свойства displayName для HOC-компонентов в Реакте.
Извлекает из EXIF информацию об ориентации изображения.
Пример использования:
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 });
});Возвращает свойство из объекта по указанному «пути».
Пригождается, когда приходится работать с объектами с большой вложенностью,
и не хочется писать длинные условия.
getObjectPath(obj, 'key1.key2.key3') и готово.
Выбирает и возвращает правильное название единиц для переданного числа.
Пригождается, когда в зависимости от числа нужно менять связанное с ним слово: «1 день», «2 дня», «5 дней».
Возвращает псевдослучайное число в указанном диапазоне.
Возвращает строку сгенерированную по принципу «префикс-число», где префикс — это значение переданного параметра (или «id»), а число каждый раз уникальное.
Пригождается, когда нужно, например, контролам на странице выдать уникальные ID, чтобы связать их с лэйблами.
Переводит строку с HEX-нотацией цвета в объект с RGB-нотацией.
Возвращает true, если переданный элемент полностью
(или нет, в зависимости от переданного параметра) виден во вьюпорте пользователя.
Возвращает true, если переданная строка — валидный адрес эл. почты.
Проверяет поддержку браузером переданного значения атрибута type блока input.
Пригождается, когда нужно проверить, поддерживает ли браузер какой-то специфический тип input
(в старых или мобильных браузерах, например).
Возвращает true, если по UA кажется, что браузер пользователя мобильный.
Пригождается, когда не нужна точная проверка (используемые внутри проверки довольно простые).
Переводит строку из kebab-case в camelCase.
Превращает объект, в котором значения ключей представлены примитивными типами или массивами примитивных типов, в query-строку.
Берёт передаваемый объект, и возвращает новый такой же, но без перечисленных ключей.
Типичный пример использования в Реакте: omit(this.props, 'mods', 'mix').
Берёт передаваемый объект, и возвращает новый такой же, но только с перечисленными ключами, опуская все остальные.
Превращает query-строку в объект.
Переводит объект с RGB-нотацией цвета в строку с HEX-нотацией.
Перемешивает переданный массив и возвращает его.
Возвращает Promise, который ждёт указанное количество миллисекунд прежде чем зарезолвиться.
Предоставляет возможность безопасного использования localStorage.
Превращает переданный колбэк в функцию, при вызове которой колбэк вызовется только в том случае, если прошло указанное количество времени.
Пригождается, когда нужно, например, отправлять данные при скролле, но делать это не мгновенно, а каждые N мс, чтобы не плодить кучу запросов.
Клёвую картинку для репозитория нарисовал Игорь Гарибальди.
