- Створіть папку “boxshadowsgenerator”
2. Ініціалізуйте проект npm:
npm init -y
3. Встановіть необхідні залежності
Встановіть React, ReactDOM:
npm install react react-dom
Встановіть Vite та плагін для React:
npm install - save-dev vite @vitejs/plugin-react
Покращіть файл package.json (додайте до “scripts” наступні команди: “dev”, “build” і “preview”)
{
"name": "box_shadows_generator",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"-": "^0.0.1",
"@vitejs/plugin-react": "^4.3.4",
"framer-motion": "^12.0.5",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"save-dev": "^0.0.1-security",
"vite": "^6.0.11"
}
}
Переконайтесь, що Framer Motion встановлений
npm install framer-motion
4.
Налаштування файлів проекту
Створіть таку структуру файлів:
box_shadows_generator/
├── index.html
├── src/
├── BoxShadowGenerator.jsx
├── main.jsx
├── style.css
├── package-lock.json
├── package.json
├── vite.config.js
├── node_modules/
Файл: index.html
``` **Файл: `src/BoxShadowGenerator.jsx`** ``` import React, { useState } from "react"; import { motion } from "framer-motion"; import "./style.css"; export default function BoxShadowGenerator() { const [offsetX, setOffsetX] = useState(10); const [offsetY, setOffsetY] = useState(10); const [blur, setBlur] = useState(15); const [spread, setSpread] = useState(0); const [shadowColor, setShadowColor] = useState("#000000"); const [inset, setInset] = useState(false); const boxShadowCSS = `${ inset ? "inset " : "" }${offsetX}px ${offsetY}px ${blur}px ${spread}px ${shadowColor}`; const handleCopy = () => { navigator.clipboard.writeText(`box-shadow: ${boxShadowCSS};`); alert("CSS скопійовано в буфер обміну!"); }; return (
Генератор тіней для коробки
Налаштуйте вашу тінь нижче.
{/* Offset X */}
Offset X setOffsetX(parseInt(e.target.value, 10))} />
{/* Offset Y */}
Offset Y setOffsetY(parseInt(e.target.value, 10))} />
{/* Blur */}
Blur setBlur(parseInt(e.target.value, 10))} />
{/* Spread */}
Spread setSpread(parseInt(e.target.value, 10))} />
{/* Color */}
Color setShadowColor(e.target.value)} />
{/* Inset Checkbox */}
Inset setInset(e.target.checked)} />
{/* Preview Box */}
Попередній перегляд тіні
{/* Display generated CSS */}
box-shadow: {boxShadowCSS}; Copy
); } ``` **Файл: `src/main.jsx`** ``` import React from "react"; import ReactDOM from "react-dom/client"; import BoxShadowGenerator from "./BoxShadowGenerator"; // імпортуємо компонент import "./style.css"; // той самий CSS файл, якщо потрібно // Створюємо корінь і рендеримо компонент ReactDOM.createRoot(document.getElementById("root")).render(
);
Файл: src/style.css
/* Контейнер, який центрирує все на сторінці */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #f8fafc; /* Світло-сірий фон */
padding: 16px;
}
/* Стилі для картки */
.card {
width: 100%;
max-width: 500px;
background: #fff;
border: 1px solid #ddd;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 16px;
}
/* Заголовок картки */
.card-header h1 {
margin: 0;
font-size: 1.5rem;
font-weight: bold;
}
.card-header p {
color: #666;
font-size: 0.875rem;
margin-top: 4px;
}
/* Контент картки */
.card-content {
margin: 16px 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* Стилі для мітки + введення */
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
font-weight: 600;
margin-bottom: 4px;
color: #444;
}
.form-group input[type="number"],
.form-group input[type="color"] {
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
}
/* Для рядка інпуту з чекбоксом Inset */
.checkbox-row {
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.checkbox-row label {
margin-right: 8px;
}
/* Контейнер для попереднього перегляду коробки */
.preview-box-container {
border: 1px solid #ddd;
border-radius: 12px;
padding: 16px;
text-align: center;
}
/* Фактична коробка попереднього перегляду */
.preview-box {
width: 240px;
height: 140px;
border-radius: 12px;
background-color: #fff;
margin: 0 auto;
}
.preview-text {
margin-top: 8px;
font-size: 0.875rem;
color: #666;
}
/* Блок з кодом + кнопка копіювання */
.code-box {
position: relative;
background: #f3f3f3;
padding: 1rem;
border-radius: 8px;
margin-top: 1rem;
font-family: monospace;
overflow: auto;
white-space: nowrap;
}
.copy-button {
position: absolute;
top: 8px;
right: 8px;
background: #fff;
border: 1px solid #ccc;
padding: 4px 8px;
cursor: pointer;
font-size: 0.875rem;
border-radius: 4px;
}
.copy-button:hover {
background: #eee;
}
Файл vite.config.mjs
!!! Якщо ваш файл має розширення .js, воно буде застарілим, тому використовуйте розширення .mjs
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});
5.
Install Dependencies
Виконайте цю команду, щоб встановити всі залежності, зазначені у вашому package.json:
npm install
6. Запустіть сервер розробки
Запустіть сервер розробки за допомогою Vite:
npm run dev
або
npx vite
Після запуску сервера ви повинні побачити наступне повідомлення в терміналі:
VITE vX.X.X готовий за X мс
➜ Місцевий: http://localhost:5173/
➜ Мережа: використовуйте - host для відкриття
Відкрийте http://localhost:5173/ у вашому браузері, щоб побачити ваше React-застосування.
Щоб зупинити сервер, використовуйте Ctrl і C, потім Y.
Якщо вам потрібно перезапустити сервер розробки:
npm run dev
Перекладено з: Box shadows generator (React, CSS and Vite)