feat: expose styleState from useInlineStyle

stopyransky · Dec 26, 2021 · 73826fc · 73826fc
1 parent 6c76953
commit 73826fc
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/useClickAway/useClickAway.ts b/src/useClickAway/useClickAway.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 interface ClickAwayPayload<T> {
   ref: React.RefObject<T>;

diff --git a/src/useInlineStyle/useInlineStyle.test.tsx b/src/useInlineStyle/useInlineStyle.test.tsx
@@ -6,7 +6,7 @@ import { BasicExample } from './examples/BasicExample';
 import { ComplexExample } from './examples/ComplexExample';
 
 describe('basic usage of useInlineStyle hook', () => {
-  it('should return [ref, style] tuple', () => {
+  it('should return [ref, style, styleState] array', () => {
     const { result, unmount } = renderHook(() =>
       useInlineStyle(() => ({
         testElStyle: {
@@ -15,12 +15,16 @@ describe('basic usage of useInlineStyle hook', () => {
       }))
     );
 
-    const [ref, style] = result.current;
+    const [ref, style, state] = result.current;
 
+    expect(typeof ref).toBe('object');
     expect(typeof style).toBe('object');
     expect(style.testElStyle).toBeDefined();
     expect(typeof style.testElStyle).toBe('object');
-    expect(typeof ref).toBe('object');
+    expect(typeof state).toBe('object');
+    expect(typeof state.hover).toEqual('boolean');
+    expect(typeof state.focus).toEqual('boolean');
+    expect(typeof state.active).toEqual('boolean');
     unmount();
   });
 

diff --git a/src/useInlineStyle/useInlineStyle.ts b/src/useInlineStyle/useInlineStyle.ts
@@ -48,7 +48,11 @@ const subscribeToEvents = (el, setStyle) => {
 export function useInlineStyle<T extends HTMLElement, P>(
   styleFn: StylingFn<P>,
   props?: Partial<P>
-): [ref: RefObject<T>, style: Record<string, CSSProperties>] {
+): [
+  ref: RefObject<T>,
+  style: Record<string, CSSProperties>,
+  styleState: StyleState
+] {
   const ref = useRef<T>(null);
   const [styleState, setStyle] = useSmartReducer(initialState);
 
@@ -60,5 +64,5 @@ export function useInlineStyle<T extends HTMLElement, P>(
 
   useEffect(() => subscribeToEvents(ref.current, setStyle), []);
 
-  return [ref, style];
+  return [ref, style, styleState];
 }