​Создание анимации с помощью StyledComponents

ДЛя создания анимаций используется теговая функция keyframes из пакета styled-components. Она принимает тот же самый CSS-код, который вы обычно помещаете в конструкцию @keyframes, а возвращает имя созданное анимации.

Это имя нужно вставить в CSS-свойство animation-name в вашем стилизованном компоненте.

#стили #styledcomponents #примерыкода

​Настройка атрибутов

Так как StyledComponents - это настоящие компоненты, у них могут быть атрибуты. Некоторые из них мы устанавливаем с помощью пропсов, а другие, которые не изменяются, можно установить сразу.

Для этого предназначен метод attrs, которые принимает объект с именами и значениями нужных атрибутов.

#стили #styledcomponents #примерыкода

Первое знакомство со StyledComponents состоялось. Источником знаний выступили в основном статьи, первыми попавшиеся в поисковике. Из самых подробных (на русском):

- Знакомство со Styled components
- Как использовать стилизованные компоненты в React

Пора переходить к фундаментальным источникам: документации (англ.).

А вот здесь есть песочница для экспериментов со стилизованными компонентами.

#ссылки #стили #styledcomponents

​Пропсы и атрибуты

👉 Все пропсы, которые являются стандартными HTML-атрибутами пробрасываются до HTML-контейнера стилизованного компонента.

👉 Можно установить атрибуты прямо внутри конструктора стилизованного компонента с помощью метода attrs, который может принимать как объект, так и функцию.

👉 Если один стилизованный компонент "наследует" от другого, то стили и атрибуты наследника переопределяют стили и атрибуты родителя (логично).

https://codesandbox.io/s/styled-components-5-react-junior-l4cn6?file=/src/App.js

#стили #styledcomponents #документация

Заинтересовал этот фрагмент. Что тут особенного:

1. В качестве селектора можно использовать не только &, который, как и в Scss, указывает на сам элемент, но и &&.

После обработки & заменяется на уникальное имя класса, сгенерированное для компонента, например, на .srTxsd.

А вместо && соответственно будет .srTxsd.srTxsd. То есть это нужно для повышения специфичности селектора.

2. Если стилизованный компонент привести к строке (метод toString), то мы получим его селектор - .srTxsd, который можно использовать, например, в глобальных стилях.

#стили #styledcomponents #документация

Плюсы и минусы StyledComponents

👍 Автоматическое выделение критического CSS и загрузка на страницу только нужных стилей.
👍 Автоматическое добавление вендорных префиксов.
👍 Нет коллизий имен, нельзя сделать опечатку в имени класса и сломать оформление.
👍 Не нужно соглашение об именах.
👍 Очевидно, какие стили какому компоненту принадлежат, они все в одном месте, их проще редактировать, все лишнее удаляется.
👍 Можно создавать динамические стили, основанные на данных из JavaScript.
👍 Есть наследование.
👍 Компонентный подход, в духе React.
👍 Используется обычный понятный SCSS-подобный синтаксис.

👎 Сильно раздувается JS-файл.
👎 Браузер не может загрузить стили заранее, так как они находятся в JS-файле.

На первый взгляд, конечно, инструмент кажется очень интересным, но вот это раздувание js-кода стилями очень печалит. А если выделять стилизованные компоненты в отдельный файл, то мы как будто вернемся к тому, с чего начинали...

#стили #styledcomponents

​Темы оформления

В Styled Components есть поддержка тем. Можно определить набор значений (цвета, размеры и пр.) и использовать их по всему проекту.

Мы уже говорили про контекст в React - глобальное пространство имен. Там было довольно сложно, нужно было сделать несколько шагов, чтобы создать и использовать контекст, в Styled Components все уже настроено.

Чтобы тема была доступна в любом компоненте, нужно использовать провайдер - компонент ThemeProvider. Ему нужно передать объект темы (в проп theme). После этого тема будет доступна во всех дочерних компонентах провайдера (также в props.theme).

Смотреть: https://codesandbox.io/s/styled-component-theming-react-junior-txvw1?file=/src/App.js

#стили #styledcomponents #документация #примерыкода

​Темы оформления

Тема может быть не только объектом, но и функцией (которая должна вернуть объект темы). Такая функция в качестве аргумента получает родительскую тему (из родительского ThemeProvider) и может ее изменить:

https://codesandbox.io/s/styledcomponents-theming-2-react-junior-rt8ye?file=/src/App.js

#стили #styledcomponents #документация #примерыкода

​Использование тем вне стилизованных компонентов

Когда мы объявляем тему в ThemeProvider, то все стилизованные компоненты внутри него автоматически получают эту тему в проп theme. А что делать с обычными (не styled) компонентами? Они ведь тоже могли бы использовать эту тему.

Чтобы получить тему из контекста приложения, есть два способа:

https://codesandbox.io/s/styled-components-theming-3-react-junior-32cis?file=/src/App.js

1. Хук useContext

Библиотека styled-components предоставляет переменную ThemeContext, в которой находится нужный контекст.

2. Компонент высшего порядка withTheme.

Функция withTheme получает тему из провайдера и добавляет нашему обычному компоненту проп theme.

#стили #styledcomponents #примерыкода #документация

Важно: внутри ThemeProvider тему для компонента можно переопределить просто передав ему объект темы в проп theme.

#стили #styledcomponents #важно

Рефы в стилизованных компонентах

Рефы со стилизованными компонентами работают так же, как и с обычными: в ref попадает либо ссылка на DOM-элемент, либо экземпляр React-компонента.

#стили #styledcomponents #рефы #документация

​Безопасность

В некоторых случаях при генерации CSS в стилизованных компонентах могут использоваться данные, введенные на вашем сайте напрямую пользователями (например, вы предлагаете самостоятельно выбрать фоновое изображение). Это может привести к разного рода CSS-инъекциям.

Документация styledComponents рекомендует использовать нативную браузерную функцию CSS.escape для очистки потенциально опасного CSS (полифилл здесь).

#стили #styledcomponents #безопасность #документация

​Styled Components + обычный CSS

О чем нужно помнить, используя стилизованные компоненты в одном проекте вместе с классическим CSS:

1. Специфичность стилей. Таблица стилей, генерируемая styled-components, добавляется прямо на страницу (в head), поэтому эти стили будут приоритетнее, чем стили из подключенного файла.

2. При стилизации готовых компонентов через styled(MyComponent) нужно не забывать устанавливать полученный проп className как класс DOM-элемента, иначе стили не применятся. Кроме того, можно совмеать обычные классы и this.props.className - но нужно помнить о специфичности.

3. При возникновении конфликтов стилизованных компонентов с основными стилями страницы, можно использовать плагин babel-plugin-styled-components-css-namespace, который добавит сгенерированным стилям пространство имен (дополнительный селектор по идентификатору для повышения специфичности), но лучше подобных ситуаций, конечно, избегать.

#стили #styledcomponents #документация

​Объект стилей

В функцию styled можно передавать не только строку CSS, но и объект, в котором ключами являются имена свойств. Это может быть полезно, если такой объект уже каким-то образом сгенерирован, - его можно использовать напрямую.

#стили #styledcomponents #документация

Изменение тега

Мы уже разбирали, что тег, который будет использован для стилизованного компонента, можно прямо указать с помощью пропа as.

Но если вы используете функцию styled() для стилизации компонента высшего порядка (HOC), проп as не дойдет до оборачиваемого компонента. В этой ситуации можно использовать проп forwardedAs.

#стили #styledcomponents #документация

​Запрет проброса пропсов

Пропсы, которые установлены для стилизованного компонента, будут проброшены до его HTML-элемента и использованы в качестве атрибутов. Чтобы предотвратить это, нужно добавить символ $ к имени пропа. Такой проп можно использовать в литерале строки, но до HTML-элемента он не дойдет.

#стили #styledcomponents #документация

Архитектурные паттерны React для ваших проектов

Статья, посвященная организации файловой структуры (и не только) проекта: https://blog.openreplay.com/react-architecture-patterns-for-your-projects

Рекомендации:

👉 директория с исходниками называется src
👉 названия папок должны быть понятны всем членам команды, нет жестких правил, можно использовать слова-синонимы, если так проще
👉 для компонентов следует выделять отдельные папки внутри директории components
👉 кроме того, есть общий index.js файл в components, который импортирует все компоненты сразу
👉 для каждого компонента создаем отдельные файлы: для собственно кода, для стилей, для тестов и для Storybook
👉 для наименования файлов и папок хуков используйте префикс use
👉 размещайте каждый хук в отдельной папке в директории hooks вместе с файлом для тестирования
👉 по аналогии с компонентами стоит создать отдельный файл hooks/index.js, который будет импортировать все хуки проекта сразу
👉 следует использовать абсолютные импорты, для этого нужно правильно настроить сборку, указав алиас или корневую директорию
👉 отделяйте логику приложения от отображения, выносите ее в хуки по возможности
👉 константы и утилитарные методы стоит вынести в отдельную директорию utils
👉 не создавайте единый Контекст для всего, лучше создать несколько независимых контекстов с разными данными

#ссылки #паттерны #проект

Babel плагин для стилизованных компонентов

Плагин babel-plugin-styled-components добавляет поддержку серверного рендинга, минификацию стилей и более удобную отладку.

Страница в документации с подробным описанием: https://styled-components.com/docs/tooling#babel-plugin

#стили #styledcomponents #документация #инструменты

​Запрет проброса пропсов

Мы уже знаем, что можно запретить проброс пропсов стилизованного компонента до самого HTML-узла и превращение их в атрибуты: https://yangx.top/react_junior/176

Для этого нужно просто добавить к имени пропа символ $.

Но есть и более сложный механизм фильтрации таких пропсов: метод shouldForwardProp. Он может пригодиться, если множество компонентов высшего порядка составлены в один и используют один и тот же проп.

У созданного с помощью функции styled() компонента нужно вызвать метод withConfig и передать ему объект конфигурации с полем shouldForwardProp.

🤔 В документации не нашлось других примеров использования метода withConfig.

‼️ Важно: остальные методы компонента, например, attrs должны идти в цепочке после withConfig.

Итак, функция shouldForwardProp - это просто фильтр для пропов. Она получает два аргумента: имя свойства и (опционально) дефолтную функцию валидации, которая отфильтровывает только имена HTML-атрибутов. Внутри shouldForwardProp вы можете разместить любую логику отбора по имени пропа.

#стили #styledcomponents #документация #примерыкода