Заполнение background по вводу сиволов. React.

Привет друг ! В этой статье попробуем разобраться как сделать плавное заполнение background, как триггер для этого будет использоваться input.

Минута саморекламы😇:

Хочешь порядка в коде, тебе сюда https://dzen.ru/a/Z1iL1J62BiwFEYgd.

Мотивация: При заполнении инпута, на ввод пароля (например), было бы не плохо как то развлечь пользователя, один из вариантов опишу ниже!

Ну а теперь, поехали!🛼

1. Подготовим болванку:
App.tsx:

import {ChangeEvent, useState} from "react";

import s from './App.module.css';

export const App = () => {

return (
<div className={s.appContainer}>
<input type="text"/>
</div>
)
}

App.module.css:

.appContainer {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

2. Пишем инструменты

Далее подготовим инструменты, для реализации задуманного нами функционала:

• В index.css в класс :root добавим переменную --background-width: 0%; - использовать будем её как минимум в двух местах.
• В App.tsx, добавим переменную const INPUT_LENGTH = 4; нужна для ограничения количества ввода символов в инпут, а так же как делитель.
• В App.tsx, состояние для отслеживания количества введенных символов const [inputLength, setInputLength] = useState<number>(0);

Ну и соберём наш конструктов в единое целое:

Ну ты понял :)

3. Итоговый код:

Пояснения оставлю в коде 😇.

index.css:

:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;

color-scheme: light dark;

font-synthesis: none;
text-rendering: optimizeLegibility;
/* вот она родимая :) */
--background-width: 0%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

App.tsx:

import {ChangeEvent, useState} from "react";

import s from './App.module.css';

/**
* В данном случае ограничим инпут 4 символами,
* ну и как делитель так же будет === 4.
*/
const INPUT_LENGTH = 4;

export const App = () => {
const [inputLength, setInputLength] = useState<number>(0);

const handleChange = (e: ChangeEvent<HTMLInputElement> ) => {
setInputLength(e.currentTarget.value.length);
};
/**
* as React.CSSProperties - типизация для TS.
*/
return (
<div
className={s.appContainer}
style={
{
'--background-width': `${(inputLength / INPUT_LENGTH) * 100}%`
} as React.CSSProperties
}
>
<input type="text" maxLength={INPUT_LENGTH} onChange={handleChange}/>
</div>
)
}

App.module.css:

.appContainer {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
position: relative;
overflow: hidden;

&::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: var(--background-width, 0%);
background-color: goldenrod;
transition: width 0.3s ease;
}

input {
font-size: 1.5rem;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 5px;
position: relative;
}
}

На некоторых вещах в App.module.css: заострю внимание:

1. overflow: hidden ограничивает видимость заполнения фона внутри контейнера.
2. ::before используется для создания анимации заполнения фона.
3. position: relative на .appContainer создаёт контекст позиционирования для псевдоэлемента.
4. position: relative на input обеспечивает корректное наложение элементов, сохраняя доступность текстового поля.

Как это выглядит: https://dzen.ru/video/watch/67657d8ae7a371497106af7b

Ну вот собственно и всё 🚀🚀🚀.

Спасибо за внимание! До Новых Встреч!🤗🤗🤗