Это третья часть моей серии статей о Как использовать React в вашем плагине Sketch. В этой статье я изменю свою предыдущую реализацию подключаемого модуля Sketch ​​с React на основе классов на основанную на хуках React.

В части первой и части второй этой серии я использовал подход, основанный на классах. Также можно реализовать ту же функциональность с помощью ловушек React.

Мы собираемся создать настраиваемую ловушку под названием useSketchData. Я буду использовать свой предыдущий проект плагина как основу.

  • В папке resources - создайте новую папку с именем hooks.
  • Внутри папки хуков - создайте файл с именем useSketchData.js.

useSketchData.js

Скопируйте следующий код в файл useSketchData.js:

App.jsx

Замените содержимое в App.jsx следующим кодом:

Вот и все! 🎉 Теперь у вас есть подключаемый модуль Sketch на основе ловушек React!

Вы можете найти полный демонстрационный репозиторий здесь.

Спасибо за чтение!