From 04ce24283fdf651dc5e910fdadfdc23bd9c39249 Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Wed, 18 May 2022 15:22:44 +1000
Subject: [PATCH] fix: prevent adding unnecessary event handlers to components

---
 .eslintrc.js                                  |   1 +
 .../__snapshots__/parent-variant.tsx.snap     |   7 -
 .../__snapshots__/divide-color.tsx.snap       | 175 ------------------
 .../__snapshots__/divide-style.tsx.snap       |  21 ---
 .../__snapshots__/divide-width.tsx.snap       |  70 -------
 .../tailwindcss/__snapshots__/gap.tsx.snap    |   7 -
 .../__snapshots__/space-between.tsx.snap      |  84 ---------
 src/use-interaction.ts                        |  30 ++-
 8 files changed, 23 insertions(+), 372 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index fd9ba02..a78512e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,6 +21,7 @@ module.exports = {
       "error",
       {
         allowList: {
+          fn: true,
           props: true,
           Props: true,
           ref: true,
diff --git a/__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap b/__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap
index a818da2..466cadc 100644
--- a/__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap
+++ b/__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap
@@ -2,13 +2,6 @@
 
 exports[`Custom - Parent Variant Snapshots parent:text-white 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text
diff --git a/__tests__/tailwindcss/__snapshots__/divide-color.tsx.snap b/__tests__/tailwindcss/__snapshots__/divide-color.tsx.snap
index 6e69da0..212dd00 100644
--- a/__tests__/tailwindcss/__snapshots__/divide-color.tsx.snap
+++ b/__tests__/tailwindcss/__snapshots__/divide-color.tsx.snap
@@ -2,13 +2,6 @@
 
 exports[`Border - Divide Color divide-amber-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -33,13 +26,6 @@ exports[`Border - Divide Color divide-amber-50 1`] = `
 
 exports[`Border - Divide Color divide-black 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -64,13 +50,6 @@ exports[`Border - Divide Color divide-black 1`] = `
 
 exports[`Border - Divide Color divide-blue-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -95,13 +74,6 @@ exports[`Border - Divide Color divide-blue-50 1`] = `
 
 exports[`Border - Divide Color divide-cyan-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -126,13 +98,6 @@ exports[`Border - Divide Color divide-cyan-50 1`] = `
 
 exports[`Border - Divide Color divide-emerald-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -157,13 +122,6 @@ exports[`Border - Divide Color divide-emerald-50 1`] = `
 
 exports[`Border - Divide Color divide-fuchsia-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -188,13 +146,6 @@ exports[`Border - Divide Color divide-fuchsia-50 1`] = `
 
 exports[`Border - Divide Color divide-gray-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -219,13 +170,6 @@ exports[`Border - Divide Color divide-gray-50 1`] = `
 
 exports[`Border - Divide Color divide-green-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -250,13 +194,6 @@ exports[`Border - Divide Color divide-green-50 1`] = `
 
 exports[`Border - Divide Color divide-indigo-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -281,13 +218,6 @@ exports[`Border - Divide Color divide-indigo-50 1`] = `
 
 exports[`Border - Divide Color divide-lime-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -312,13 +242,6 @@ exports[`Border - Divide Color divide-lime-50 1`] = `
 
 exports[`Border - Divide Color divide-neutral-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -343,13 +266,6 @@ exports[`Border - Divide Color divide-neutral-50 1`] = `
 
 exports[`Border - Divide Color divide-orange-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -374,13 +290,6 @@ exports[`Border - Divide Color divide-orange-50 1`] = `
 
 exports[`Border - Divide Color divide-pink-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -405,13 +314,6 @@ exports[`Border - Divide Color divide-pink-50 1`] = `
 
 exports[`Border - Divide Color divide-purple-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -436,13 +338,6 @@ exports[`Border - Divide Color divide-purple-50 1`] = `
 
 exports[`Border - Divide Color divide-red-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -467,13 +362,6 @@ exports[`Border - Divide Color divide-red-50 1`] = `
 
 exports[`Border - Divide Color divide-rose-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -498,13 +386,6 @@ exports[`Border - Divide Color divide-rose-50 1`] = `
 
 exports[`Border - Divide Color divide-sky-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -529,13 +410,6 @@ exports[`Border - Divide Color divide-sky-50 1`] = `
 
 exports[`Border - Divide Color divide-slate-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -560,13 +434,6 @@ exports[`Border - Divide Color divide-slate-50 1`] = `
 
 exports[`Border - Divide Color divide-stone-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -591,13 +458,6 @@ exports[`Border - Divide Color divide-stone-50 1`] = `
 
 exports[`Border - Divide Color divide-teal-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -622,13 +482,6 @@ exports[`Border - Divide Color divide-teal-50 1`] = `
 
 exports[`Border - Divide Color divide-transparent 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -653,13 +506,6 @@ exports[`Border - Divide Color divide-transparent 1`] = `
 
 exports[`Border - Divide Color divide-violet-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -684,13 +530,6 @@ exports[`Border - Divide Color divide-violet-50 1`] = `
 
 exports[`Border - Divide Color divide-white 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -715,13 +554,6 @@ exports[`Border - Divide Color divide-white 1`] = `
 
 exports[`Border - Divide Color divide-yellow-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -746,13 +578,6 @@ exports[`Border - Divide Color divide-yellow-50 1`] = `
 
 exports[`Border - Divide Color divide-zinc-50 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
diff --git a/__tests__/tailwindcss/__snapshots__/divide-style.tsx.snap b/__tests__/tailwindcss/__snapshots__/divide-style.tsx.snap
index 62e8728..9e03bbe 100644
--- a/__tests__/tailwindcss/__snapshots__/divide-style.tsx.snap
+++ b/__tests__/tailwindcss/__snapshots__/divide-style.tsx.snap
@@ -2,13 +2,6 @@
 
 exports[`Border - Divide Style divide-dashed 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -30,13 +23,6 @@ exports[`Border - Divide Style divide-dashed 1`] = `
 
 exports[`Border - Divide Style divide-dotted 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -58,13 +44,6 @@ exports[`Border - Divide Style divide-dotted 1`] = `
 
 exports[`Border - Divide Style divide-solid 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
diff --git a/__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap b/__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap
index 36259fe..13c00bd 100644
--- a/__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap
+++ b/__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap
@@ -2,13 +2,6 @@
 
 exports[`Border - Divide Width divide-x 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -31,13 +24,6 @@ exports[`Border - Divide Width divide-x 1`] = `
 
 exports[`Border - Divide Width divide-x-0 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -60,13 +46,6 @@ exports[`Border - Divide Width divide-x-0 1`] = `
 
 exports[`Border - Divide Width divide-x-2 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -89,13 +68,6 @@ exports[`Border - Divide Width divide-x-2 1`] = `
 
 exports[`Border - Divide Width divide-x-4 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -118,13 +90,6 @@ exports[`Border - Divide Width divide-x-4 1`] = `
 
 exports[`Border - Divide Width divide-x-8 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -147,13 +112,6 @@ exports[`Border - Divide Width divide-x-8 1`] = `
 
 exports[`Border - Divide Width divide-y 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -176,13 +134,6 @@ exports[`Border - Divide Width divide-y 1`] = `
 
 exports[`Border - Divide Width divide-y-0 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -205,13 +156,6 @@ exports[`Border - Divide Width divide-y-0 1`] = `
 
 exports[`Border - Divide Width divide-y-2 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -234,13 +178,6 @@ exports[`Border - Divide Width divide-y-2 1`] = `
 
 exports[`Border - Divide Width divide-y-4 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -263,13 +200,6 @@ exports[`Border - Divide Width divide-y-4 1`] = `
 
 exports[`Border - Divide Width divide-y-8 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
diff --git a/__tests__/tailwindcss/__snapshots__/gap.tsx.snap b/__tests__/tailwindcss/__snapshots__/gap.tsx.snap
index 7499ddf..f193aa5 100644
--- a/__tests__/tailwindcss/__snapshots__/gap.tsx.snap
+++ b/__tests__/tailwindcss/__snapshots__/gap.tsx.snap
@@ -2,13 +2,6 @@
 
 exports[`Flexbox & Grid - Gap gap-0 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={
     Array [
       Object {
diff --git a/__tests__/tailwindcss/__snapshots__/space-between.tsx.snap b/__tests__/tailwindcss/__snapshots__/space-between.tsx.snap
index ec80f54..c38ede2 100644
--- a/__tests__/tailwindcss/__snapshots__/space-between.tsx.snap
+++ b/__tests__/tailwindcss/__snapshots__/space-between.tsx.snap
@@ -2,13 +2,6 @@
 
 exports[`Border - Divide Width space-x-0 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -30,13 +23,6 @@ exports[`Border - Divide Width space-x-0 1`] = `
 
 exports[`Border - Divide Width space-x-0.5 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -58,13 +44,6 @@ exports[`Border - Divide Width space-x-0.5 1`] = `
 
 exports[`Border - Divide Width space-x-1 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -86,13 +65,6 @@ exports[`Border - Divide Width space-x-1 1`] = `
 
 exports[`Border - Divide Width space-x-1.5 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -114,13 +86,6 @@ exports[`Border - Divide Width space-x-1.5 1`] = `
 
 exports[`Border - Divide Width space-x-96 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -142,13 +107,6 @@ exports[`Border - Divide Width space-x-96 1`] = `
 
 exports[`Border - Divide Width space-x-px 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -170,13 +128,6 @@ exports[`Border - Divide Width space-x-px 1`] = `
 
 exports[`Border - Divide Width space-y-0 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -198,13 +149,6 @@ exports[`Border - Divide Width space-y-0 1`] = `
 
 exports[`Border - Divide Width space-y-0.5 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -226,13 +170,6 @@ exports[`Border - Divide Width space-y-0.5 1`] = `
 
 exports[`Border - Divide Width space-y-1 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -254,13 +191,6 @@ exports[`Border - Divide Width space-y-1 1`] = `
 
 exports[`Border - Divide Width space-y-1.5 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -282,13 +212,6 @@ exports[`Border - Divide Width space-y-1.5 1`] = `
 
 exports[`Border - Divide Width space-y-96 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
@@ -310,13 +233,6 @@ exports[`Border - Divide Width space-y-96 1`] = `
 
 exports[`Border - Divide Width space-y-px 1`] = `
 <View
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onHoverIn={[Function]}
-  onHoverOut={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={Array []}
 >
   <Text>
diff --git a/src/use-interaction.ts b/src/use-interaction.ts
index f90b987..91b5279 100644
--- a/src/use-interaction.ts
+++ b/src/use-interaction.ts
@@ -18,7 +18,8 @@ export function useInteraction({
   onPressIn,
   onPressOut,
   onPress,
-}: PressableProps = {}) {
+  className = "",
+}: PressableProps & { className?: string } = {}) {
   const [hover, setHover] = useState(false);
   const [focus, setFocus] = useState(false);
   const [active, setActive] = useState(false);
@@ -132,12 +133,25 @@ export function useInteraction({
     active,
     hover,
     focus,
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onHoverIn: handleHoverIn,
-    onHoverOut: handleHoverOut,
-    onPress: handlePress,
-    onPressIn: handlePressIn,
-    onPressOut: handlePressOut,
+    onBlur: shouldAddHandler(className, "focus", handleBlur),
+    onFocus: shouldAddHandler(className, "focus", handleFocus),
+    onHoverIn: shouldAddHandler(className, "hover", handleHoverIn),
+    onHoverOut: shouldAddHandler(className, "hover", handleHoverOut),
+    onPress: shouldAddHandler(className, "active", handlePress),
+    onPressIn: shouldAddHandler(className, "active", handlePressIn),
+    onPressOut: shouldAddHandler(className, "active", handlePressOut),
   };
 }
+
+function shouldAddHandler<T>(
+  className: string,
+  pseudoClass: string,
+  fn: T
+): T | undefined {
+  if (
+    className.includes("component") ||
+    className.includes(`${pseudoClass}_`)
+  ) {
+    return fn;
+  }
+}