Хотите сделать что-нибудь круче обычного текстового оформления? Давайте оживим их вместе с React Rough Notation!
Вы заметили, что на целевых страницах часто бывает подчеркнутый текст? Да, я тоже! Вы думаете, что это недостаточно круто для вашего сайта? Да, я тоже!
Поэтому, когда я наткнулся на Rought Notation, я был действительно счастлив, потому что это своего рода легкая библиотека, которая позволяет делать действительно крутые вещи. Но что такое Rought Notation?
Небольшая библиотека JavaScript для создания и анимации аннотаций на веб-странице
Rough Notation использует RoughJS для создания рисованного внешнего вида. Элементы можно аннотировать в различных стилях. Продолжительность и задержку анимации можно настроить или просто отключить.
Грубая нотация позволяет вам добиться большего, чем просто выделение, по нескольким причинам. Первый из них анимированный. Другая причина в том, что это не просто свет!
Мой репозиторий на Github будет доступен здесь, если вы хотите посмотреть.
Rough Notation действительно прост в использовании. Как вы знаете, Gatsby - это современный генератор сайтов для React. Итак, нам придется использовать версию Rough Notation для React.
Итак, давайте установим его:
npm install --save react-rough-notationНачиная с самого простого, мы собираемся отобразить текст и выделить пару слов:
Как видите, Rought Navigation требует как минимум двух опор:
- Первый - «тип». Какой тип анимации вы хотите? Есть много вариантов:
- Второй - «шоу». Это логическое значение, указывающее, должна ли отображаться анимация.
Есть много реквизитов, которые можно использовать для настройки вашей анимации. Вот некоторые примеры свойств:
- color: это строковое значение, представляющее цвет эскиза аннотации.
- animationDuration и animationDelay: принимает число в миллисекундах. они соответственно установят продолжительность вашей анимации и когда она начнется.
- многострочный: это свойство применяется только к встроенному тексту. Требуется логическое значение. Нет ничего лучше картинки, чтобы понять это:
- итерация: каждая анимация выполняется в две итерации, но, задав этому реквизиту номер, вы можете решить, сколько раз вы хотите, чтобы она рисовалась.
- animate: принимает логическое значение. По умолчанию это правда, если вы установите значение false, вы получите статическое текстовое оформление.
Кроме того, если вы хотите поместить много анимаций в один абзац, вам нужно обернуть свой компонент внутри aRoughNotationGroup.
В заключение этой статьи я немного поигрался с реквизитом. Вот результат:
Если вы хотите поиграть с ним самостоятельно, вы можете взглянуть на песочницу кода, которую они сделали доступной здесь. Это круто!
Как кто-то красиво заметил, он будет работать в разработке, но ваша сборка не будет успешной, и вы получите следующую ошибку:
Вы получаете сообщение об ошибке из-за жизненного цикла gatsby. Gatsby выполняет предварительную визуализацию компонентов в сборке для их статического обслуживания (имитирует рендеринг на стороне сервера). Обязательно обращайтесь к переменным контекста браузера, таким как document, только когда ваш компонент смонтирован (на стороне клиента). React-raw-notation запрашивает документ во время сборки, пока он еще не предоставлен gatsby.
Следующая ошибка была исправлена в версии 0.1.1. Так что, если у вас возникла проблема, попробуйте обновить его с помощью npm update response-rough-notation. Однако вы можете обойти эту ошибку сборки, условно вызвав реакцию-грубая нотация:
👏 Если вам понравилась эта статья, дайте мне знать, хлопнув по ней или оставив комментарий.
👍 Если вам понравились мои работы, вы всегда можете подписаться на меня.
📚 Если вы хотите узнать больше, вы можете взглянуть на эти статьи:
