React JS

🖥 TanStack Router — современная и масштабируемая маршрутизация для React-приложений

— npm install @tanstack/react-router

TanStack Router — это полностью типобезопасный React-маршрутизатор со встроенной функцией выборки данных, кэшированием stale-while revalidate и удобными API для поиска по параметрам.

🖥 GitHub
🟡 Доки

@react_tg

🔥Border radius на CSS: полезные заметки для фронтенд-разработчика

#css #tips #frontend

@react_tg

🖥 React Query Builder — компонент на React для построения запросов

— npm i react-querybuilder @react-querybuilder/dnd react-dnd react-dnd-html5-backend

React Query Builder — это полностью настраиваемый компонент построения запросов для React, а также набор функций для импорта и экспорта в SQL, JSON, в формат для MongoDB и т.д.

🖥 GitHub
🟡 Доки
🟡 Онлайн-демо

@react_tg

🖥 Shader Gradient — пакет React для создания анимированного градиента

— npm i three @types/three @react-three/fiber shadergradient framer-motion

Shader Gradient также можно использовать в Figma и Framer.

🖥 GitHub
🟡 Страничка Shader Gradient

@react_tg

⚡️ Если вы добавляете символы кавычек, используйте в качестве содержимого open-quote и close-quote, поскольку они учитывают язык документа.

🚀 Подробнее

#css #tip

@react_tg

🖥 gestalt — набор компонентов UI React

npm i gestalt --save
npm i gestalt-charts --save
npm i gestalt-datepicker --save

gestalt — это набор компонентов пользовательского интерфейса React, поддерживающий язык дизайна Pinterest

🖥 GitHub
🟡 Примеры использования и компоненты

@react_tg

🔤 Transform.tools - крутой инструмент: универсальный конвертер данных

Этот инструмент выделяется двумя ключевыми преимуществами: поддержка многочисленных форматов и простой, интуитивно понятный интерфейс.

С его помощью вы можете с легкостью конвертировать CSS в JS-объекты, Markdown в HTML, JSON в MySQL и многое другое.

Transform.tools - сохраните себе, чтобы не искать его в будущем.

▪Github
▪Transform.tools

@react_tg

🖥 Plate — мощный набор инструментов для React, облегчающий разработку текстовых редакторов на основе Slate

Сердце Plate — это система плагинов, специально разработанная для slate-react. Она помогает поддерживать проект организованным и эффективным, разделяя различные функциональные возможности.

В дополнение к плагинам Plate предоставляет нестилизованные и доступные компоненты, основанные на Radix UI — они служат основой для создания высококачественных систем проектирования.

🖥 GitHub
🟡 Доки
🟡 Демо, как выглядит редактор

@react_tg

🖥 BlockNote — текстовый редактор, созданный с помощью React, с большим количеством возможностей

— npm install @blocknote/core @blocknote/react @blocknote/mantine

BlockNote использует идею блоков (как в Notion), имеет множество возможностей, его можно легко расширять и дописывать новые возможности. Построен на основе Prosemirror и Tiptap.

🖥 GitHub

@react_tg