React.js Plugins | To Watch | RU
8 subscribers
317 photos
317 links
Плагины, пакеты и примеры на React.js
Download Telegram
Интерполяция строк с правильным типом возвращаемого значения на основе переданных подстановок переменных

Этот пакет из GitHub представляет собой утилиту интерполяции строк, которая возвращает правильный тип TypeScript в зависимости от переданных переменных. Он может использоваться в любом TypeScript/JavaScript приложении и предлагает замену переменных внутри строки на переданные значения, а также проверки на соответствие переданных переменных. У него есть настраиваемые опции, а также поддержка исходных модулей и CommonJS. Он нацелен на обеспечение высококачественной интерполяции строк, поддерживаемой TypeScript, и может использоваться как самостоятельно, так и в других средствах локализации.

Github
Приложение для составления бюджета, которое использует преимущества D3 для отображения вашего бюджета

Привет! "MonDinero" - это приложение для составления бюджета, использующее D3 для представления вашего бюджета и расходов в виде интерактивных и удобочитаемых графиков. Все ваши данные будут безопасны, так как мы собираем информацию о ваших транзакциях через Plaid с помощью их токенов Open Authorization, чтобы каждый кусочек информации, который вы предоставляете нам, был подтвержден вами. Ваши данные о бюджете будут храниться и защищены с помощью Amazon's Relational Database Services для надежности и производительности. Присоединяйтесь к нам и верните себе контроль над своими финансами!

Github
Веб-сайт рандомизатора призов с использованием React и p5.js

Этот пакет в GitHub - это инструмент для случайного выбора призов на The โง่ Hackathon ครั้งที่ 7 в Таиланде. Он написан на React и p5.js и предоставляет пользователю возможность запускать симуляцию и размещать новых игроков с помощью кнопки пробела. Для начала нового раунда можно выполнить полную перезагрузку, а для сброса игры целиком - удалить данные в localStorage.

Github
Позволяет отображать диаграммы React на основе SVG в формате react-pdf

react-pdf-charts - это библиотека для рендеринга SVG-графиков на React в react-pdf. В настоящее время находится в ранней разработке и может быть не готова для использования в продакшн. Позволяет создавать графики, такие как линейные, с использованием заданного набора данных и параметров. В папке /examples можно найти рабочие примеры, которые можно запустить, следуя инструкциям в README файле.

Github
3D-компоненты с тремя и реагирующими

Этот пакет включает в себя краткое содержание и инструкции по использованию пакета Social Icons 3D, созданного для изучения 3D-объектов с использованием React. Для проекта использовались следующие библиотеки 3D: Three.js, @react-three/fiber и @react-three/drei. Для создания 3D-моделей были использованы форматы .OBJ, преобразованные в .GLTF с помощью Blender и библиотеки gltf-pipeline. Также была использована библиотека gltfjsx для создания React-файлов, используя ресурсы библиотеки react-three. В пакете также предоставлены примеры иконок, созданных в Blender.

Github
Профессионально разработанный сайт-портфолио с использованием ReactJS

Этот пакет включает в себя профессионально разработанный персональный портфолио-сайт Mihir Chavan, использующий последние технологии, такие как ReactJS, Tailwind CSS, Framer-Motion, React-Slick и React-Scroll, для достижения интерактивного и визуально привлекательного пользовательского опыта. Сайт демонстрирует навыки и достижения автора через динамичные переходы, интуитивную навигацию и увлекательные анимации. Кроме того, в пакете присутствуют разделы "Features", "Projects", "Resume", "Testimonial" и "Contact", а также инструкции о том, как запустить и развернуть приложение.

Github
Рынок NFT с каской и рядом

Этот пакет из GitHub представляет собой NFT-площадку Web3 DAPP. Он позволяет покупать, продавать и демонстрировать NFT на сети Polygon Ethereum. Для установки необходимы Node.js, пакетный менеджер npm или yarn, а также расширение Metamask для браузера. Инструкции по установке и настройке даны в документации проекта. Демонстрационная версия доступна по ссылке, а для связи с разработчиком указаны контактные данные и ссылки на проект и демонстрацию.

Github
Полнофункциональное приложение для составления списка дел с React

Пакет Task List - полнофункциональное приложение для списка дел, которое помогает организовывать задачи и эффективно управлять ими. Возможности включают создание, редактирование и удаление задач, а также отметку задач как выполненных. Интерфейс приложения дружелюбный и содержит интуитивный дизайн. Проект разработан на фронтенде с использованием HTML, CSS, JavaScript и TypeScript, а также дополнительных библиотек и фреймворков, включая React и Bootstrap. Чтобы запустить приложение локально, необходимо клонировать репозиторий, установить зависимости и запустить сервер разработки. Пользователи могут создавать, редактировать и удалять задачи, а также отмечать их как выполненные.

Github
Легкий и настраиваемый менеджер файлов cookie по GDPR

Этот пакет из GitHub называется Leckerli. Он является легким (~16кб сжатия gzip) и настраиваемым менеджером GDPR cookie. Для использования Leckerli в своем веб-сайте необходимо добавить соответствующий CSS/JavaScript в код вашего сайта. Также можно добавить Leckerli с помощью Google Tag Manager или загрузить локально CSS и JS файлы из релиза. Конфигурацию Leckerli можно настроить, добавив объект leckerliSettings к глобальному объекту window. Пакет также поддерживает различные события и настраиваемые темы с помощью CSS переменных. Если вы хотите внести свой вклад в проект, вы можете его запустить локально при помощи команды yarn dev.

Github
Приложение для блога с использованием Next.js и попутный ветер.

Этот пакет в GitHub представляет собой блог, построенный с использованием Next.js и Tailwind CSS. Он использует TypeScript 5.1.3, Next.js 13.4 и React.js, а также TailwindCSS 3.2 и его плагины. Включены MDX с contentlayer, Shadcn/ui и Radix-ui, иконки Lucide, а также Remark, rehype и их экосистемы. Пакет также включает поддержку EsLint, Prettier и их экосистемы. Основные функции включают безопасность типов с помощью TypeScript, новый роутер приложений Next.js, темная и светлая темы с использованием next-themes, автоматически созданные изображения Open Graph с помощью vercel/og, сортировка, объединение и линтинг классов Tailwind CSS, красивый пользовательский интерфейс с использованием Shadcn/ui и Radix-ui, а также красивые иконки с использованием Lucide.

Github | Демо
Погодное приложение, которое предоставляет точную информацию о погоде в любом месте по всему миру

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

Github
Мгновенное создание QR-кода с любым содержимым

GitHub пакет "QR Code Generator" позволяет мгновенно создавать QR-коды с любым содержимым. Он построен на базе React и Typescript, а также предоставляет демонстрацию своей функциональности. Использование пакета просто - достаточно пройти по ссылке и создать свой QR-код абсолютно бесплатно.

Github
Высокопроизводительный плагин для создания слайдов для react

Slider Moon - это плагин для создания слайдов на React. Основной упор был сделан на создание доступного, высокопроизводительного и легкоустанавливаемого плагина. Вы можете свободно исследовать и развивать этот плагин. Плагин поддерживает бесконечный слайдер, кликабельные точки и стрелки для навигации, анимацию перехода между слайдами, а также коллбэк-функцию для событий изменения слайда. Плагин доступен под лицензией MIT.

Github | Демо
Простая реализация игры в крестики-нолики с использованием React

Данный пакет находится на GitHub и представляет собой простую реализацию игры "Крестики-нолики" с использованием React, анимации маршрутов с помощью React Router v4 и Styled Components, а также ImmutableJS, GraphQL, Apollo, Jest, Storybook и немного магии. Для начала работы необходимо установить пакет с помощью команды "yarn install" и запустить его с помощью команды "yarn start". Затем откройте браузер и перейдите по адресу 0.0.0.0:8090. В планах на ближайшее будущее разработчика добавить еще больше технологий, таких как Flow, GraphQL Subscription, SSR, а также реализацию React Native. Он также просит пользователей связаться с ним, если его код не соответствует лучшим практикам программирования на стеке React, и просит поставить ему звезду, если его код помог.

Github
Приложение со списком дел, созданное по заданному дизайну с использованием React

Этот проект Todo List App - это решение для одного из челленджей от Devchallenges.io. Это приложение позволяет пользователям создавать и управлять списками дел. Оно создано с использованием библиотеки React и React-Icons для добавления значков в интерфейс.

Github
Приложение React Hooks для расчета ИМТ человека

Данный пакет включает в себя приложение на React Hooks для расчета индекса массы тела (BMI) человека. Оно позволяет хранить данные за последние 7 дней с помощью LocalStorage. Создано с использованием create-react-app. Важное улучшение в пакете - удаление зависимостей от модуля Materialize-CSS и исправление проблемы, при которой график переставал работать при наведении на старые точки.

Github
Компонент react form wizard с проверкой и индикатором выполнения

Этот пакет включает в себя компонент React Form Wizard, который позволяет создавать визарды форм с валидацией и прогресс-баром без использования внешних зависимостей. В компоненте можно задать форму как круглой или квадратной формы, выбрать цвет вкладок и прогресс-бара, а также указать текст кнопок "Next", "Back" и "Finish". Каждая вкладка содержит заголовок, иконку и контент, которые могут быть настроены в соответствии с требованиями проекта.

Github | Демо
Музыкальный веб-сайт Lofi, созданный с использованием React.js

В этом пакете из Github представлен проект Lofi Music Website, разработанный с использованием React.js. Он предоставляет возможность наслаждаться прослушиванием музыки в стиле лофай пользователям, создавая приятную и расслабляющую атмосферу. Веб-сайт имеет минималистичный и привлекательный дизайн, способствующий созданию успокаивающей обстановки. Функционал включает музыкальный плеер с возможностью воспроизведения, паузы, пропуска треков и регулировки громкости. Для установки проекта необходимо клонировать репозиторий, установить зависимости с помощью yarn install, запустить сервер разработки с помощью yarn start и открыть веб-сайт в браузере.

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

Этот пакет из GitHub представляет собой простое приложение Todo List, построенное с использованием React. Он позволяет пользователям добавлять, редактировать и удалять задачи, отмечать задачи как выполненные и фильтровать задачи в зависимости от их статуса выполнения. В приложении есть возможность добавления, редактирования и удаления задач, а также отметки задач как выполненных, фильтрации задач и отображения общего количества задач и количества выполненных задач. Для установки приложения необходимо склонировать репозиторий, установить зависимости и запустить приложение. В качестве API используется JSONPlaceholder API для получения и обновления задач. Если вы хотите внести свой вклад в проект, вам следует форкнуть репозиторий, создать новую ветку, внести изменения и отправить pull request.

Github
Airbnb website Clone using React

Пакет GitHub Airbnb Clone - это проект разработки клона Airbnb, основанный на учебнике FreeCodeCamp. Цель состоит в том, чтобы попрактиковаться и глубже понять концепции React. Значительные изменения были внесены в исходную кодовую базу, чтобы использовать функциональность каждого компонента и улучшить результаты обучения. Во время создания проекта автор изучил основы React, развил практические навыки в реализации компонентов, управлении состоянием, маршрутизации и обработке событий, решении проблем и поиске решений посредством исследований и постоянной практики.

Github