Moment.js

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

Она позволяет отображать дату в соответствии с локализацией и в удобочитаемом формате. Вы можете использовать MomentJS внутри браузера, используя метод script. Он также доступен с Node.js и может быть установлен с помощью npm.

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

 moment().format('MMMM Do YYYY, HH:mm:ss');

вернет дату в заданном формате

 февраль 21. 2013, 18:48:48

 moment().add('days', 7).add('months', 1);

добавит к изначальной дате семь дней, а затем 1 месяц

👉 @sWebDev

React Bootstrap

Помните старую добрую библиотеку Bootstrap? Это была, собственно, смесь CSS и JS-файлов, позволявшая вам легко добавлять уже подготовленные UI-компоненты.
Так может ли быть лучшее сочетание, чем Bootstrap и React? Эта библиотека заполняет пробел между старым и новым подходом, добавляя мощь React к уже и так мощной библиотеке.

Все, что вы могли делать с Bootstrap, можно делать и с этой библиотекой, с той лишь разницей, что вы будете при этом следовать паттерну React-компонентов.

👉 @sWebDev

Numeral.js — библиотека для форматирования чисел

На создание библиотеки для удобного форматирования чисел программиста и веб-дизайнера Адама Дрэйпера вдохновила аналогичная библиотека для даты и времени — moment.js. Numeral.js позволяет задавать число знаков после запятой, символы-разделители для дробной части и групп разрядов, формат представления валют, процентов, времени, аббревиатуры для миллионов, миллиардов, мегабайтов и т.п. Кроме того, можно восстанавливать числовые значения из существующего строкового представления.

Пример обработки числа с помощью библиотеки:

 var number = numeral(1000);
 var string = number.format('0,0'); // '1,000'
 var value = number.value(); // 1000

👉 @sWebDev

Fabric React

Еще одна библиотека, созданная одним из крупных игроков рынка. Речь идет о Microsoft. Fabric React может помочь вам в создании Office-подобного пользовательского опыта. Это не значит, что вы будете копировать Office, просто у вас будет доступ к похожему поведению и графике.

Fabric React совместима с десктопами, устройствами Android и iOS, а также используется на таких сайтах как Office 365, OneNote, Azure DevOps и пр.

👉 @sWebDev

Bluebird

bluebird это библиотека, реализующая функционал промисов для javascript. Если в клиентскую сборку вы её вряд ли потащите, как никак 21Kb gzipped, то не использовать её на стороне сервера вы просто не имеете морального права. Bluebird всё ещё работает быстрее нативной реализации. Можете не верить на слово, а скачать репозиторий и запустить бенчмарки на последней версии Node.js (9.x.x). Подробней о преимуществах можно прочитать в кратком обзоре архитектурных принципов библиотеки.

👉 @sWebDev

GSAP.js или Greensock

Это библиотека JavaScript для создания высокопроизводительных анимаций. По сути, GSAP — манипулятор свойств объекта, который обновляет значения быстро и с высокой точностью. Анимацию можно останавливать, замедлять, ускорять, делать плавной. Имеет готовый набор функций, которые делают анимацию кроссбраузерной.

👉 @sWebDev

Gestalt

Библиотека компонентов Gestalt была разработана Pinterest на основе их внутреннего языка дизайна. Как и Material UI, и Ant-Design, Gestalt была создана для упрощения коммуникации между дизайнерами и разработчиками путем внедрения множества готовых компонентов.

👉 @sWebDev

Swiper.js

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

👉 @sWebDev

React Virtualized

React Virtualized предназначен для решения одной-единственной проблемы: эффективного рендеринга списков и табличных данных на странице. Я знаю, что вы думаете: «А что, так сложно отобразить таблицу? Или простой выпадающий список?» Но что, если в вашем выпадающем списке больше тысячи элементов, а в таблице — больше сотни столбцов?

👉 @sWebDev

Autosize.js

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

👉 @sWebDev

React Desktop

Этот проект пытается подражать десктопному опыту в вебе.
Как видите, при помощи этой библиотеки вы можете идеально воспроизвести десктопный опыт, используя JavaScript. А это значит, что вы сможете создавать настоящие десктопные приложения, используя Electron.js или же просто добавлять интересные эффекты в ваши веб-приложения (эти примеры лучше всего работают в Chrome, так что используйте именно этот браузер для тестирования).

👉 @sWebDev

Device.js

Device будет полезен больше для изменения интерфейса страницы или приложения на различных устройствах. Например, можно сделать версию для Android несколько иной, чем версия под iOS. Или пойти дальше и заточить, например, телефонную портретную версию под интерфейс iOS или Android. Ещё очень часто возникает необходимость отображения ссылок на онлайн-маркеты в зависимости от устройства пользователя. Например, при заходе с устройств на Android отображать ссылку на Google Play, на iPhone и iPad — AppStore, на Windows — магазин Windows Phone и т.д. Device.js с этим справляется прекрасно.

👉 @sWebDev

Rebass

Это маленькая React библиотека UI-компонентов, благодаря которой можно создавать очень мощные наборы примитивных UI-элементов для тем на основе библиотеки Styled System.

Среди ключевых особенностей этой библиотеки стоит отметить следующие:
1. Очень простой старт. У вас не будет нужды писать большое количество бойлерплейт-кода: вы его просто импортируете и начнете расширять примитивные компоненты, а также создавать собственные при необходимости.

2. Привыкнув к рабочему процессу и синтаксису, вы сможете реализовывать темы для своих приложений, причем они будут обладать потрясающим уровнем кастомизации и расширяемости. А лучше всего то, что система тем полностью совместима с Theme UI.

3. При создании этой библиотеки применялся подход mobile-first. Вы получите новейшую философию дизайна прямо из коробки.

4. Flexbox layout с примитивными компонентами Box и Flex, которые вы можете расширять.

👉 @sWebDev

Snap svg

Это JavaScript библиотека. Позволяет создавать и анимировать векторную графику в современных браузерах. Можно загружать код SVG асинхронно и запрашивать части, которые нужны, для превращения SVG файлов в спрайты.

👉 @sWebDev

Semantic UI React

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

Оригинальная версия библиотеки работала на основе HTML и CSS с небольшими вкраплениями JavaScript. Вы определяли свои HTML-элементы, задавали подготовленные CSS-классы и вызывали подходящую JavaScript-функцию.

Теперь, благодаря добавленной совместимости с React, вы при помощи JSX-кода напрямую определяете компоненты и связываете их с кодом React Component. То есть, вам не нужно волноваться о выборе правильного элемента и добавлять код: «реактивный» подход все это значительно упрощает.

👉 @sWebDev

Push.js

Push - это самый быстрый способ начать работу с уведомлениями для рабочего стола. API уведомлений позволяет современным браузерам отправлять уведомления на рабочий стол пользователя. Среди сильных сторон библиотеки можно отметить простую документацию, понятную даже начинающему разработчику.

👉 @sWebDev

react-three-fiber

Это threejs для React в web и react-native.
Скорее всего, если вы видели действительно классную 3D-анимацию на сайте, вероятно, она была построена на three.js - react-three-fiber даёт вам возможность подключиться к React при создании 3D-сцен. Также стоит изучить Next.js + Tailwind.

👉 @sWebDev

Editor.js

Пригодится, если в вашем проекте возникает необходимость в текстовом редакторе, а Editor.js — это простая и привлекательная JS-библиотека. Её можно использовать в проектах, написанных на чистом JavaScript, и в проектах, основанных на каких-либо фреймворках, вроде React. Редактор позволяет форматировать текст, например — делать его полужирным или курсивным, поддерживает оформление заголовков и много чего ещё. Тому, кто хочет воспользоваться Editor.js, достаточно бегло просмотреть документацию, после чего у него будет общее понимание того, что нужно делать.

👉 @sWebDev

React Aria

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

Пример использования - useButton:
import { useButton } from '@react-aria/button';
function Button(props) {
let ref = React.useRef();
let { buttonProps } = useButton(props, ref);
return (
<button {...buttonProps} ref={ref}>
{props.children}
</button>
);
}
<Button onPress={() => alert('Button pressed!')}>Press me</Button>;

👉 @sWebDev

Howler.js

Вы, вероятно, пользовались в своих проектах HTML-элементами, предназначенными для работы со звуками и видеозаписями. Библиотека Howler.js направлена на решение различных задач, связанных со звуком. К ней подготовлена хорошая документация.

Вот фрагмент кода, демонстрирующий работу с этой библиотекой:
<script>
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
</script>

👉 @sWebDev

ReactPlayer

ReactPlayer - потрясающая библиотека, которая позволяет вставлять видео из основных источников (YouTube, Facebook, Twitch, SoundCloud и другие) и определять собственные элементы управления видео.

👉 @sWebDev