@necrobox/diamonds

v9.0.2

Published

2 days ago

A shiny pile of typed JS helpers for everyday use

0High
0Medium
0Low

@necrobox/diamonds

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

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

Содержание

Установка

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

npm install --save @necrobox/diamonds

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

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

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

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

disableBodyScroll, enableBodyScroll

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

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

camelToKebab

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

capitalize

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

colorize

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

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

cookieStringToObject

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

datauriToBlob

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

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

debounce

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

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

deepClone

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

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

equals

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

findLast

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

formatBytes

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

formatNumberString

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

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

formatPhoneNumberString

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

getBrowserScrollbarWidth

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

getDisplayName

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

getImageOrientation

Извлекает из 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

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

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

getPlural

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

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

getRandomNum

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

getUniqueId

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

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

hexToRgb

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

isElementInViewport

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

isEmailValid

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

isInputTypeSupported

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

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

isMobile

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

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

kebabToCamel

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

objectToQueryString

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

omit

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

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

pick

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

queryStringToObject

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

rgbToHex

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

shuffle

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

sleep

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

storage

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

throttle

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

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

Назначение

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

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

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

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

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@necrobox/diamonds

Содержание

Установка

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

Назначение

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