Как спроектировать конвертер HEX в RGB с помощью ReactJS

Знаете ли вы, как создать обратный конвертер HEX в RGB? Если нет, прочтите инструкции по разработке этого инструмента в React.js ниже.

Это веб-приложение разработано с использованием ReactJS, преобразующего цветовые коды из HEX в RGB и наоборот. Это удобный инструмент преобразования цветов, который поддерживает предварительный просмотр в реальном времени, исправление ошибок и копирование значений цвета в буфер обмена.

Необходимые условия:

1. Реагировать JS
2. CSS
3. Реагирующие хуки
4. НПМ и НПХ

Шаги по созданию конвертера Hex в RGB с помощью ReactJS

Создайте приложение реагирования с помощью этой команды:

npx create-react-app конвертер шестнадцатеричного изображения в RGB

После создания каталога проекта, например, hex-to-rgb-converter, используйте следующую команду, чтобы перейти к нему:

конвертер CD из шестнадцатеричного в RGB

Структура проекта

Пакет.json

“dependents”: { “@testing-library/jest-dom”: “^5.17.0”, “@testing-library/react”: “^13.4.0”, “@testing-library/user-event”: “^13.5.0”, “react”: “^18.2.0”, “react-dom”: “^18.2.0”, “react-scripts”: “5.0.1”, “web-vitals”: ” ^2.1.4″ }

Метод

1. Он использует переменные состояния для хранения значений HEX и RGB, useRef для ссылок на поля ввода.
2. Валидные и невалидные функции обрабатывают проверку входных данных и отчеты об ошибках.
3. toRgb преобразует HEX в RGB и устанавливает цвет фона документа.
4. toHex преобразует RGB в HEX и наоборот.
5. Функции copyRgbToClipboard и copyHexToClipboard копируют значения в буфер обмена.
6. Этот компонент предоставляет поля ввода, копию кнопки и средство выбора цвета.
7. Ошибки отображаются красным текстом, а цвет фона документа обновляется.

Например

JavaScript

импортировать React, { useState, useRef } из «реагировать»; импортировать ‘./App.css’; function App() { const (hexValue, setHexValue) = useState(”); const (rgbValue, setRgbValue) = useState(”); const hexInputRef = useRef(null); const rgbInputRef = useRef (нуль); const (ошибка, setError) = useState(”); функция valid(element) { element.style.color=”#202040″; УстановитьОшибку(”); } Функция недействительна (element,otherElement, errorMessage) { element.style.color=”#f04624″; ДругойЭлемент(”); setError(Сообщение об ошибке); } Функция toRgb(hexCode) { const rgbArr = (); if (/^#?(A-Fa-f0-9){6}$/.test(hexCode)) { valid(hexInputRef.current); hexCode = hexCode.split(‘#’)(1) || шестнадцатеричный код; for (let i = 0; i parseInt(value) { value = parseInt(value).toString(16); hex += value.length === 1 ? ‘0’ + value : value; }); setHexValue (шестнадцатеричный); document.body.style.backgroundColor = hex; } else {valid(rgbInputRef.current, setHexValue, ‘Неверное значение RGB’); } } else {valid(rgbInputRef.current, setHexValue, ‘Неверное значение RGB’); } } function copyRgbToClipboard() { const rgbInput = document.getElementById(‘rgb’); rgbInput.select(); document.execCommand(‘копировать’); } function copyHexToClipboard() { const hexInput = document.getElementById(‘hex’); hexInput.select(); document.execCommand(‘копировать’); } возвращаться (

Конвертер HEX в RGB

RGB { setRgbValue(e.target.value); toHex(e.target.value); }} ref={rgbInputRef} Placeholder=”Введите значение RGB” /> Копировать HEX RGB { setHexValue(e.target.value); toRgb(e.target.value); }} ref={hexInputRef} Placeholder=”Введите шестнадцатеричное значение” /> Копировать HEX {ошибка &&

{ошибка}

} Выбор цвета: { const selectedColor = e.target.value; setHexValue (выбранный цвет); toRgb (выбранный цвет); }} /> ); } экспортировать приложение по умолчанию;

CSS

.container { цвет фона: #f5f5f5; отступ: 20 пикселей; радиус границы: 10 пикселей; максимальная ширина: 450 пикселей; маржа: 0 авто; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); } .wrapper { display: flex; гибкое направление: столбец; поле: 15 пикселей 0; } Метка {font-weight: 600; нижнее поле: 8 пикселей; } h1 {выравнивание текста: центр; цвет: #308d46; начертание шрифта: жирный; поле внизу: 10 пикселей; отступ: 10 пикселей; радиус границы: 10 пикселей; } h2 {выравнивание текста: центр; цвет: #0984e3; начертание шрифта: жирный; семейство шрифтов: «Courier New», Courier, моноширинный; нижняя граница: 5 пикселей сплошная #0984e3; поле внизу: 10 пикселей; отступ: 10 пикселей; радиус границы: 10 пикселей; } ввод {ширина: 93%; отступ: 12 пикселей; размер шрифта: 16 пикселей; граница: 2 пикселя, сплошная #ccc; радиус границы: 15 пикселей; контур: нет; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1); переход: border-color 0,2 с, box-shadow 0,2 с; } input:focus { border-color: #202040; box-shadow: 0 4px 18px rgba(32, 32, 64, 0.2); } Кнопка { цвет фона: #0984e3; белый цвет; граница: нет; отступ: 15 пикселей; поле сверху: 15 пикселей; радиус границы: 10 пикселей; курсор: указатель; переход: фоновый цвет 0,2 с, преобразование 0,2 с; } Кнопка: наведите {background-color: #404080; преобразование: масштаб (1,05); } .color-picker { display: flex; гибкое направление: столбец; поле: 15 пикселей 0; } .color-picker input {margin-top: 8px; высота: 70 пикселей; ширина: 100%; курсор: указатель; } p { цвет: красный; поле: 8 пикселей 0; } body { цвет фона: #f0f0f0; семейство шрифтов: «Arial», без засечек; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; минимальная высота: 100vh; маржа: 0; } @media (максимальная ширина: 768 пикселей) { .container { максимальная ширина: 100%; } ввод, кнопка {padding: 10px; размер шрифта: 14 пикселей; } }

Шаги для запуска приложения

Введите следующую команду в терминал:

запуск НПМ

Введите следующий URL-адрес в браузере:

Результат:

Надеюсь, эта статья будет вам полезна!

В приведенной выше статье вы познакомились с «Как спроектировать конвертер HEX в RGB с помощью ReactJS». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!