How to use React in your Sketch plugin – With React Hooks

This is part three in my series on How to use React in your Sketch plugin. In this article I’ll change my previous Sketch plugin implementation from being React class-based into being based on React hooks.

In part one and part two of this series I took a class-based approach. It is also possible to implement the same functionality using React hooks.

We’re going to create a custom hook called useSketchData. I’ll be using my previous plugin project as a base.

• In your resources folder — Create a new folder named hooks
• Inside the hooks folder — Create a file named useSketchData.js

useSketchData.js

Copy the following code into your useSketchData.js file:

A custom React hook for handling communication with Sketch

App.jsx

Replace the content in App.jsx with the following code:

That’s it! 🎉 You now have a React hooks based Sketch plugin!

You can find a complete demo repository here.

Thank you for reading!