feat(usetoggle): added useToggle

apps/docs/package.json

@@ -10,7 +10,7 @@
     "clean": "rimraf .turbo && rimraf node_modules && rimraf .next"
   },
   "dependencies": {
-    "@react-awesome/components": "1.0.7",
+    "@react-awesome/components": "1.0.8",
     "classnames": "^2.5.1",
     "lucide-react": "^0.315.0",
     "next": "^14.0.4",

packages/components/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @react-awesome/components
 
+## 1.0.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @react-awesome/use-toggle@0.0.1
+
 ## 1.0.7
 
 ### Patch Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-awesome/components",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -43,6 +43,7 @@
     "@react-awesome/use-click-outside": "0.0.3",
     "@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-previous": "0.0.3",
+    "@react-awesome/use-toggle": "0.0.1"
   }
 }

packages/components/src/index.ts

@@ -7,3 +7,4 @@ export * from '@react-awesome/use-click-outside'
 export * from '@react-awesome/use-preserve-input-caret-position'
 export * from '@react-awesome/use-previous'
 export * from '@react-awesome/use-selection-range'
+export * from '@react-awesome/use-toggle'

packages/use-toggle/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: ["@react-awesome/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

packages/use-toggle/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @react-awesome/use-previous
+
+## 0.0.1
+
+### Patch Changes
+
+- Added useToggle

packages/use-toggle/README.md

@@ -0,0 +1,32 @@
+# @react-awesome/use-toggle
+
+<p align="center">
+  <img alt="version" src="https://img.shields.io/npm/v/%40react-awesome%2Fuse-toggle" />
+  <img alt="coverage" src="https://img.shields.io/codecov/c/github/trinhthinh388/react-awesome-components/master?token=VQ8VJ7OECQ&flag=useToggle" />
+  <img alt="license" src="https://img.shields.io/github/license/trinhthinh388/react-awesome-components" />
+  <img alt="build status" src="https://img.shields.io/github/actions/workflow/status/trinhthinh388/react-awesome-components/release.yml" />
+  <img alt="size" src="https://img.shields.io/bundlejs/size/%40react-awesome/use-toggle" />
+</p>
+
+**useToggle** tracks the previous value of a variable.
+
+Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/use-toggle) for more information.
+
+## Installation
+
+```sh
+yarn add @react-awesome/use-toggle
+# or
+npm i @react-awesome/use-toggle
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE).

packages/use-toggle/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@react-awesome/use-toggle",
+  "version": "0.0.1",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "description": "useToggle toggles the boolean value with ease.",
+  "keywords": [
+    "react",
+    "hooks",
+    "toggle",
+    "useToggle"
+  ],
+  "repository": {
+    "url": "https://github.com/trinhthinh388/react-awesome-components"
+  },
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "vite --config ../../vite.config.ts build",
+    "dev": "vite --watch --config ../../vite.config.ts build",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "clean": "rimraf .turbo && rimraf node_modules && rimraf dist",
+    "test": "vitest --config ../../vite.config.ts --coverage --run",
+    "test:ui": "vitest --config ../../vite.config.ts --coverage --ui",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@react-awesome/eslint-config": "*",
+    "@react-awesome/tsconfig": "*",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "eslint": "^8.56.0",
+    "react": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/use-toggle/src/index.ts

@@ -0,0 +1 @@
+export * from './useToggle/useToggle'

packages/use-toggle/src/useToggle/useToggle.spec.tsx

@@ -0,0 +1,24 @@
+import { act, renderHook } from '@testing-library/react'
+import { useToggle } from './useToggle'
+
+describe('useToggle', () => {
+  it('Should toggle the value', () => {
+    const { result, rerender } = renderHook(() => useToggle(true))
+
+    expect(result.current.isOn).toBe(true)
+
+    act(() => {
+      result.current.toggle()
+      rerender()
+    })
+
+    expect(result.current.isOn).toBe(false)
+
+    act(() => {
+      result.current.toggle(true)
+      rerender()
+    })
+
+    expect(result.current.isOn).toBe(true)
+  })
+})

packages/use-toggle/src/useToggle/useToggle.tsx

@@ -0,0 +1,16 @@
+import React, { useCallback, useState } from 'react'
+
+export const useToggle = (initialValue: boolean) => {
+  const [value, setValue] = useState(initialValue)
+
+  const toggle = useCallback(
+    (_value?: boolean) =>
+      setValue((prev) => (typeof _value === 'boolean' ? _value : !prev)),
+    [],
+  )
+
+  return {
+    toggle,
+    isOn: value,
+  }
+}

packages/use-toggle/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@react-awesome/tsconfig/react-library.json",
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+  },
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"],
+}

turbo.json

@@ -8,6 +8,7 @@
     },
     "@react-awesome/components#build": {
       "dependsOn": [
+        "@react-awesome/use-toggle#build",
         "@react-awesome/use-previous#build",
         "@react-awesome/use-selection-range#build",
         "@react-awesome/use-preserve-input-caret-position#build",