From 576984a1b3328a1354b479e7e5e9b98551ed7147 Mon Sep 17 00:00:00 2001
From: Thinh Trinh Duc <thinh.duc.trinh@gmail.com>
Date: Wed, 24 Apr 2024 21:55:00 +0700
Subject: [PATCH] feat: updated useTogle APi

---
 apps/docs/package.json                           |  2 +-
 apps/docs/src/pages/docs/use-toggle.mdx          |  6 +++---
 packages/components/CHANGELOG.md                 |  7 +++++++
 packages/components/package.json                 |  4 ++--
 packages/use-toggle/CHANGELOG.md                 |  6 ++++++
 packages/use-toggle/package.json                 |  2 +-
 .../use-toggle/src/useToggle/useToggle.spec.tsx  | 16 ++++++++--------
 packages/use-toggle/src/useToggle/useToggle.tsx  | 11 +++++------
 8 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/apps/docs/package.json b/apps/docs/package.json
index cc32cb7..f76435b 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -10,7 +10,7 @@
     "clean": "rimraf .turbo && rimraf node_modules && rimraf .next"
   },
   "dependencies": {
-    "@react-awesome/components": "1.0.19",
+    "@react-awesome/components": "1.0.20",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.315.0",
diff --git a/apps/docs/src/pages/docs/use-toggle.mdx b/apps/docs/src/pages/docs/use-toggle.mdx
index 7f0bd4e..d4f16f7 100644
--- a/apps/docs/src/pages/docs/use-toggle.mdx
+++ b/apps/docs/src/pages/docs/use-toggle.mdx
@@ -22,7 +22,7 @@ import { Container } from '../../components/Container'
 import { useToggle } from '@react-awesome/components'
 
 export const Example = () => {
-  const { toggle, isOn } = useToggle(true)
+  const [isOn, toggle] = useToggle(true)
 return (
 
 <>
@@ -47,7 +47,7 @@ return (
     </div>
     <label
       htmlFor="switch"
-      class="mt-px mb-0 ml-3 font-light cursor-pointer select-none"
+      className="mt-px mb-0 ml-3 font-light cursor-pointer select-none"
     >
       Click to toggle
     </label>
@@ -63,7 +63,7 @@ return (
 import { useToggle } from '@react-awesome/use-toggle'
 
 const Example = () => {
-  const { toggle, isOn } = useToggle(state)
+  const [isOn, toggle] = useToggle(state)
 
   return <input checked={isOn} type="checkbox" onClick={toggle} />
 }
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index ad39da0..05d85b2 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @react-awesome/components
 
+## 1.0.20
+
+### Patch Changes
+
+- Updated dependencies
+  - @react-awesome/use-toggle@1.0.0
+
 ## 1.0.19
 
 ### Patch Changes
diff --git a/packages/components/package.json b/packages/components/package.json
index 6328c57..d79c634 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-awesome/components",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -44,7 +44,7 @@
     "@react-awesome/use-preserve-input-caret-position": "0.0.3",
     "@react-awesome/use-selection-range": "0.0.3",
     "@react-awesome/use-previous": "0.0.3",
-    "@react-awesome/use-toggle": "0.0.1",
+    "@react-awesome/use-toggle": "1.0.0",
     "@react-awesome/use-breakpoint": "1.0.0"
   }
 }
diff --git a/packages/use-toggle/CHANGELOG.md b/packages/use-toggle/CHANGELOG.md
index 28c6503..f72a464 100644
--- a/packages/use-toggle/CHANGELOG.md
+++ b/packages/use-toggle/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @react-awesome/use-previous
 
+## 1.0.0
+
+### Major Changes
+
+- Return as array of values instead of fixed named object key
+
 ## 0.0.1
 
 ### Patch Changes
diff --git a/packages/use-toggle/package.json b/packages/use-toggle/package.json
index f9d3bf8..3cec92c 100644
--- a/packages/use-toggle/package.json
+++ b/packages/use-toggle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-awesome/use-toggle",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
diff --git a/packages/use-toggle/src/useToggle/useToggle.spec.tsx b/packages/use-toggle/src/useToggle/useToggle.spec.tsx
index 6094f23..a06ba14 100644
--- a/packages/use-toggle/src/useToggle/useToggle.spec.tsx
+++ b/packages/use-toggle/src/useToggle/useToggle.spec.tsx
@@ -3,22 +3,22 @@ import { useToggle } from './useToggle'
 
 describe('useToggle', () => {
   it('Should toggle the value', () => {
-    const { result, rerender } = renderHook(() => useToggle(true))
+    const { result } = renderHook(() => useToggle(true))
 
-    expect(result.current.isOn).toBe(true)
+    expect(result.current[1]).toBeInstanceOf(Function)
+
+    expect(result.current[0]).toBe(true)
 
     act(() => {
-      result.current.toggle()
-      rerender()
+      result.current[1]()
     })
 
-    expect(result.current.isOn).toBe(false)
+    expect(result.current[0]).toBe(false)
 
     act(() => {
-      result.current.toggle(true)
-      rerender()
+      result.current[1](true)
     })
 
-    expect(result.current.isOn).toBe(true)
+    expect(result.current[0]).toBe(true)
   })
 })
diff --git a/packages/use-toggle/src/useToggle/useToggle.tsx b/packages/use-toggle/src/useToggle/useToggle.tsx
index 314e088..3f0d54d 100644
--- a/packages/use-toggle/src/useToggle/useToggle.tsx
+++ b/packages/use-toggle/src/useToggle/useToggle.tsx
@@ -1,6 +1,8 @@
-import React, { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
-export const useToggle = (initialValue: boolean) => {
+export const useToggle = (
+  initialValue: boolean,
+): [boolean, (value?: boolean) => void] => {
   const [value, setValue] = useState(initialValue)
 
   const toggle = useCallback(
@@ -9,8 +11,5 @@ export const useToggle = (initialValue: boolean) => {
     [],
   )
 
-  return {
-    toggle,
-    isOn: value,
-  }
+  return useMemo(() => [value, toggle], [toggle, value])
 }