Merge pull request #98 from trinhthinh388/feat/update-use-toggle-api

feat: updated useTogle APi
trinhthinh388 · Apr 24, 2024 · 1713e96 · 1713e96
2 parents ff9430c + 576984a
commit 1713e96
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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])
 }