🔥 Трюк с style в React, который упростит работу с динамическими стилями
Вместо создания длинных условий или классов, можно использовать spread-оператор и логические выражения прямо в объекте стилей:
📌 Что тут происходит:
* ...(условие && { стиль }) добавит стиль, если условие true;
* Альтернатива classnames для inline-стилей;
* Чисто, читаемо и удобно при большом числе условий.
🧠 Подходит, когда используете inline-стили (например, в дизайн-системах или при генерации email-шаблонов).
💡 Можно комбинировать с memo-компонентами и кастомными хуками, чтобы минимизировать ререндеры и повысить производительность.
Вместо создания длинных условий или классов, можно использовать spread-оператор и логические выражения прямо в объекте стилей:
<div
style={{
padding: '16px',
...(isError && { border: '1px solid red' }),
...(isActive ? { backgroundColor: '#def' } : { opacity: 0.5 }),
}}
>
Hello!
</div>
📌 Что тут происходит:
* ...(условие && { стиль }) добавит стиль, если условие true;
* Альтернатива classnames для inline-стилей;
* Чисто, читаемо и удобно при большом числе условий.
🧠 Подходит, когда используете inline-стили (например, в дизайн-системах или при генерации email-шаблонов).
💡 Можно комбинировать с memo-компонентами и кастомными хуками, чтобы минимизировать ререндеры и повысить производительность.
👍2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Table tenniCSS
Создано на HTML и SCSS, без использования JS.
#css
https://codepen.io/amit_sheen/pen/PobQjMX
Создано на HTML и SCSS, без использования JS.
#css
https://codepen.io/amit_sheen/pen/PobQjMX
🤯3👍1
Media is too big
VIEW IN TELEGRAM
Всего 900 строк кода - и у вас уже есть рабочий интерфейс с анимациями, меню, браузером и даже терминалом.
Модель справляется с этим за 172 секунды.
Код и демо уже доступны - а инсайдеры шепчут, что официальный релиз выйдет на этой неделе.
Первые тестеры называют Gemini 3 Pro «лучшим ИИ для кодинга на сегодня».
https://codepen.io/ChetasLua/pen/EaPvqVo
Please open Telegram to view this post
VIEW IN TELEGRAM
😁2👍1