From 54883bb5c36cf21462a421605a709fdd6f04b150 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 18 May 2022 11:44:37 +0200
Subject: chore: add branding animation

---
 src/utils/hooks/use-styles.tsx | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/utils/hooks/use-styles.tsx

(limited to 'src/utils')

diff --git a/src/utils/hooks/use-styles.tsx b/src/utils/hooks/use-styles.tsx
new file mode 100644
index 0000000..d47e9fb
--- /dev/null
+++ b/src/utils/hooks/use-styles.tsx
@@ -0,0 +1,29 @@
+import { RefObject, useEffect } from 'react';
+
+export type UseStylesProps = {
+  /**
+   * A property name or a CSS variable.
+   */
+  property: string;
+  /**
+   * The styles.
+   */
+  styles: string;
+  /**
+   * A targeted element reference.
+   */
+  target: RefObject<HTMLElement>;
+};
+
+/**
+ * Add styles to an element using a React reference.
+ *
+ * @param {UseStylesProps} props - An object with property, styles and target.
+ */
+const useStyles = ({ property, styles, target }: UseStylesProps) => {
+  useEffect(() => {
+    if (target.current) target.current.style.setProperty(property, styles);
+  }, [property, styles, target]);
+};
+
+export default useStyles;
-- 
cgit v1.2.3