React.js Plugins | To Watch | RU
8 subscribers
317 photos
317 links
Плагины, пакеты и примеры на React.js
Download Telegram
Фреймворк для многоагентных приложений LLM, построенный с использованием Next.js и FastApi

Автохен UI - экспериментальный пользовательский интерфейс для работы с агентами AutoGen на основе библиотеки AutoGen. Интерфейс разработан с использованием Next.js и веб-API, построенного с использованием FastApi. AutoGen UI разработан для облегчения разработки приложений с использованием нескольких агентов, способных взаимодействовать друг с другом для решения сложных задач. UI позволяет создавать и тестировать агентов, анализировать их поведение и результаты, а также проводить отладку. В пакете также представлен план развития, который включает создание эндпоинта FastApi для работы с AutoGen, реализацию базового UI для общения с агентами, добавление инструментов для отладки и создание платформы для компоновки и запуска агентов.

Github
SaaS-приложение для редактирования изображений с использованием искусственного интеллекта

Pixiemist - это SaaS-приложение для редактирования изображений с использованием искусственного интеллекта. Оно создано на основе Next.js 13 с использованием различных технологий, таких как Prisma для работы с базой данных SQL на PlanetScale, Stripe для оформления подписок, Cloudinary для хранения изображений и NextAuth.js для аутентификации. Приложение написано на TypeScript и использует Zustand для управления состоянием. Для запуска локально необходимо установить зависимости с помощью pnpm, скопировать файл .env.example в файл .env и обновить переменные, а затем запустить сервер разработки с помощью команды pnpm dev. Учтите, что генерация изображений может занимать до 3-5 минут из-за холодного запуска Replicate.

Github
Менеджер закладок для совместной работы с открытым исходным кодом, использующий Next.js

Linkwarden - открытый источниковый менеджер закладок для сбора, организации и архивирования веб-страниц. Целью является организация полезных страниц и статей из интернета в одном месте, и так как полезные страницы могут исчезнуть со временем, Linkwarden также сохраняет копию каждой страницы в виде скриншота и PDF, обеспечивая доступность, даже если исходный контент больше не доступен. Кроме того, Linkwarden создан с учетом сотрудничества, позволяя обмениваться ссылками с общественностью и/или позволяя нескольким пользователям совместно работать.

Github
Одностраничное приложение, позволяющее пользователям присоединяться к социальной сети

В данном проекте представлена социальная сеть, позволяющая пользователям присоединяться к ней и писать посты и комментарии к ним. Проект разделен на два сервера - клиентский и серверный, их можно запустить одновременно с помощью команды npm run dev. Также можно запустить сервера индивидуально, используя команды npm run dev:client для клиентской части и npm run dev:server для серверной части. После запуска серверов проект можно увидеть по адресу localhost:3000. Функциональность проекта включает регистрацию, вход в аккаунт, редактирование биографии, загрузку профильных фотографий, поиск друзей, общий и приватный чаты, создание постов на стене и комментирование постов.

Github
Прогрессивно улучшается WebGL и преломление хрусталика

Этот пакет из GitHub представляет собой обучающий материал по созданию отзывчивой веб-страницы с использованием WebGL, CSS и React Three Fiber. Автором является David Lindkvist от компании 14islands. В статье на Codrops представлены инструкции по установке и запуску проекта, а также предоставлены ссылки на используемые компоненты и изображения. Один из ключевых элементов этой веб-страницы - это эффект линзового искажения, реализованный на основе работы Paul Henschel под названием "Lens Refraction".

Github
Платформа социальной сети с автоматической модерацией контента

Проект SocialEcho - это социальная платформа, построенная с использованием стека MERN (MongoDB, Express.js, React.js, Node.js). Он включает в себя две основные особенности: автоматизированную систему модерации контента и контекстную аутентификацию. Платформа также предоставляет обычные функциональности, характерные для социальных сетей, такие как создание профиля, создание и обмен сообщениями, лайки и комментирование сообщений, а также подписка/отписка от пользователей. Автоматизированная система модерации контента использует различные API для обработки естественного языка, такие как Perspective API, TextRazor API и Hugging Face Interface API.

Github
Добавьте анимированные кнопки для "нравится", "не нравится" и пользовательских взаимодействий в приложение React

Like-button-celebration - это библиотека, разработанная для добавления анимированных кнопок для лайков, снятия лайков, голосования вверх и настраиваемых взаимодействий на ваши блоги, статьи и веб-контент. С помощью этой библиотеки вы легко можете интегрировать интерактивные кнопки, которые празднующие действия пользователей, добавляя приятные анимации в ваше веб-приложение. Она предоставляет различные параметры настройки, такие как состояние кнопки (активное или неактивное), размер иконки, изображение и др. В пакете также приведены примеры использования компонентов HeartLike, ThumbLike и CustomButton, а также указаны настройки, которые можно использовать для настройки анимации.

Github
Настраиваемый компонент toast для React

Этот пакет из GitHub представляет собой настраиваемый компонент для отображения всплывающих сообщений (toast) в React. Для начала работы с библиотекой необходимо установить ее в проект с помощью команды "npm install alert". Затем нужно добавить компонент <Toaster/> в приложение, который будет отображать все ваши сообщения. После этого можно использовать функцию toast() из любого места в приложении. Подробную документацию об API и реализации можно найти в ближайшем будущем.

Github
Приложение для перевода, созданное с помощью React

Данный пакет из GitHub содержит библиотеки для создания переводчика веб-приложения. В его состав входят следующие библиотеки: @reduxjs/toolkit, react-redux, redux, axios и react select. Основным источником для перевода текста является Tranlator App Source, доступный по ссылке https://rapidapi.com/dickyagustin/api/text-translator2.

Github
Карта отслеживания рейсов с React.js

Flight Radar: on Map – это пакет на GitHub, который предоставляет возможность отслеживать полеты в реальном времени на интерактивной карте. В пакете используются следующие библиотеки: reduxjs/toolkit, react-redux, thunk, axios, react-leaflet, leaflet и react-paginate. Пакет уже включает в себя необходимые зависимости, поэтому нет необходимости их отдельно скачивать. Исходные данные о полетах получаются с помощью API с указанными географическими координатами.

Github
Следующий шаблон проверки подлинности shadcn firebase

Этот пакет в GitHub представляет собой шаблон (boilerplate) для создания системы аутентификации, использующей технологии NEXTJS, SHADCNUI, REACT HOOK FORM, ZOD и FIREBASE. Для работы необходимо создать проект Firebase и заполнить информацию в файле .env. В системе поддерживаются 3 метода аутентификации: Google, Email/Password и GitHub. Чтобы добавить один из этих методов, необходимо включить его в консоли Firebase и создать приложение на GitHub для получения соответствующей информации.

Github
Расширение Chrome для предварительного просмотра разметки в chat.openai.com

Данный пакет из GitHub представляет собой расширение для Chrome под названием ChatGPT Markup Preview Extension (PoC), которое позволяет предварительно просматривать разметку HTML в чате на chat.openai.com. Расширение отображает предварительный просмотр HTML-кода в блоках кода. Поддерживается как HTML, так и TSX (TypeScript с расширением JSX) с использованием библиотеки React, а также подгружается стилизация с помощью Tailwind CSS. У расширения также есть возможность копирования предварительного просмотра как изображение для вставки в чат. Для установки необходимо скачать последнюю версию архива chatgpt-markup-preview.zip с GitHub, разархивировать его и загрузить распакованное расширение в Chrome через разработческий режим на странице chrome://extensions.

Github
Интерфейс чата Ollama и OpenAI

Пакет LLM Chatter, версия 0.0.2, представляет собой одно HTML-файловое приложение для общения с локальными моделями большой языковой модели (LLM) Ollama или LLM OpenAI.com. Для установки нужно запустить несколько команд, включая установку Ollama и добавление хотя бы одной модели. Затем необходимо запустить локальный сервер и открыть приложение в веб-браузере. Дополнительно, можно зарегистрировать аккаунт на openai.com и получить API-ключ, который можно использовать при использовании OpenAI Chat. Также предоставляются инструкции по установке дополнительного сервера node.js Express для использования с LangChain URL. Приложение построено с использованием Vite/Bun/React/TailwindCSS/FontAwesome, использует иконки от Font Awesome и делает API-запросы к нескольким ресурсам: http://localhost:11434 (ollama), http://localhost:8080 (сервер langchain-ollama) и https://api.openai.com.

Github
Многодорожечный веб-аудиоредактор и проигрыватель с предварительным просмотром формы сигнала

React-studio-js - это пакет на GitHub, который предоставляет набор функций для манипулирования звуковыми дорожками в приложении React. Это позволяет пользователям записывать, обрезать, разбивать и сдвигать треки, а также выполнять операции CRUD для аннотаций. Пакет требует корректной работы webaudio в браузере и поддерживает версии браузера, совместимые с Can I Use?. Пакет может быть установлен с помощью npm, и на GitHub доступен демонстрационный пример React.

Github
Набор компонентов, связанных с формой, для React

Этот пакет npm предоставляет набор компонентов для форм в React. Вы можете использовать эти компоненты для удобного создания форм. Для всех компонентов доступны CSS-переменные для темизации и классные имена. Есть встроенная поддержка темного режима. В пакете также предоставлены инструкции по установке, документация, примеры и демо-страницы для каждого компонента.

Github
Ваше полное руководство по освоению использования "ref" в React

Этот пакет в GitHub научит вас мастерству работы с ref в React. Вы узнаете о базовых принципах использования ref, таких как строковые и обратные ссылки, а затем перейдете к более сложным темам, таким как хук useRef () и API forwardRef (). В конце вы сможете уверенно использовать ref в своих приложениях React и повысить свои навыки в этом фреймворке до нового уровня! Пакет также включает 6 уроков, в которых вы научитесь доступу к DOM-узлам компонентов, созданию ссылок с помощью функций обратного вызова и использованию функции createRef ().

Github
Продвинутое приложение, сочетающее в себе возможности ChatGPT и DALL.E

ChatGPT-Pro - это продвинутое приложение, объединяющее мощь ChatGPT и DALL.E. С помощью этого приложения вы можете легко переключаться между версиями ChatGPT. Одной из особенностей ChatGPT-Pro является возможность сохранять чат-беседы на локальном устройстве. Вы также можете развернуть это приложение одним нажатием на платформы Netlify или Vercel.

Github
Веб-сайт магазина материалов Muisc, использующий React

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

Github
Приложение для ведения дневника, сосредоточенное на личных размышлениях и развитии мышления

"Pile" - это настольное приложение для ведения рефлексивного дневника. Оно хранит ваши данные локально на компьютере, работает с файлами в формате markdown и предоставляется бесплатно. Авторы выражают благодарность за вклад в разработку Проекту Zach Bogart за создание иконки и Electron react boilerplate за упрощение запуска настольных приложений.

Github
Браузерная игровая площадка на Python, созданная с использованием ReactJS и MicroPIP

Этот пакет из GitHub представляет собой браузерное игровое поле Python, созданное с использованием Web Assembly Pyodide и ReactJS. Он имеет функции, позволяющие устанавливать библиотеки из MicroPIP, а также простого использования и подсветки синтаксиса. Чтобы использовать этот пакет, нужно клонировать репозиторий, установить зависимости и запустить сервер разработки.

Github
Легкий редактор кода, который помогает эффективно и быстро кодировать в мире с углом обзора 360°

Tilder in Web App - это легкий редактор кода, который помогает программировать эффективно и быстро в 360° мире. Он поддерживает более 100 языков программирования и использует Monaco-editor. Tilder объединяет простоту редактора кода с необходимыми разработчикам функциями для их основного цикла редактирования, сборки и отладки. Он предоставляет полнофункциональное редактирование кода, навигацию и поддержку понимания, а также легковесную отладку, расширяемую модель и интеграцию с существующими инструментами. Он обновляется ежемесячно и доступен для загрузки на Windows, macOS и Linux на официальном веб-сайте Tilder. Проект приветствует участие людей в разработке путем сообщения об ошибках и запросе новых функций, а также проверке внесенных изменений в код. Использование пакета регулируется лицензией MIT, владение которой принадлежит DSoft.

Github