main 🧊 add new hooks

Author: debabin

packages/newdocs/content/functions/hooks/useField.mdx

@@ -6,7 +6,7 @@ usage: medium
 type: hook
 isTest: true
 isDemo: true
-lastModifiedTime: 1780662926000
+lastModifiedTime: 1783690580000
 ---
 
 import metadata from './useField.meta.json';

packages/newdocs/content/functions/hooks/useField.meta.json

@@ -4,9 +4,9 @@ description: Hook to manage a form
 category: state
 usage: medium
 type: hook
-isTest: false
+isTest: true
 isDemo: true
-lastModifiedTime: 1783684565236
+lastModifiedTime: 1783690580000
 ---
 
 import metadata from './useForm.meta.json';

packages/newdocs/content/functions/hooks/useForm.mdx

@@ -6,7 +6,7 @@ usage: medium
 type: hook
 isTest: true
 isDemo: true
-lastModifiedTime: 1783666924000
+lastModifiedTime: 1783690580000
 ---
 
 import metadata from './useNotification.meta.json';
@@ -47,7 +47,7 @@ import metadata from './useNotification.meta.json';
 ## Usage
 
 ```tsx
-const { supported, granted, notification, trigger, show, close } = useNotification();
+const { supported, notification, trigger, show, close } = useNotification();
 ```
 
 ## Type Declarations

packages/newdocs/content/functions/hooks/useForm.meta.json

@@ -1,6 +1,6 @@
 'use client'
 
-import { useNotification } from '@siberiacancode/reactuse';
+import { useNotification, usePermission } from '@siberiacancode/reactuse';
 import { BellIcon, CheckIcon } from 'lucide-react';
 
 const NOTIFICATION = {
@@ -12,6 +12,7 @@ const NOTIFICATION = {
 
 const Demo = () => {
   const notification = useNotification();
+  const permission = usePermission('notifications');
 
   const onSubscribe = async () => {
     const granted = await notification.trigger();
@@ -55,7 +56,7 @@ const Demo = () => {
           </div>
         </div>
 
-        {notification.granted === 'granted' && (
+        {permission.state === 'granted' && (
           <div className='flex w-full flex-col items-center gap-3'>
             <div className='border-border text-foreground flex w-full items-center justify-center gap-2 rounded-full border py-2.5 text-sm font-medium'>
               <CheckIcon className='text-primary size-4' />
@@ -73,13 +74,13 @@ const Demo = () => {
           </div>
         )}
 
-        {notification.granted === 'prompt' && (
+        {permission.state === 'prompt' && (
           <button className='w-full rounded-full!' type='button' onClick={onSubscribe}>
             Subscribe
           </button>
         )}
 
-        {notification.granted === 'denied' && (
+        {permission.state === 'denied' && (
           <p className='text-muted-foreground text-center text-xs leading-relaxed'>
             Notifications are turned off. You can enable them again from your browser settings.
           </p>

packages/newdocs/content/functions/hooks/useNotification.mdx

@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@siberiacancode/fetches": "^1.14.3",
-    "@siberiacancode/reactuse": "^1.0.8",
+    "@siberiacancode/reactuse": "^1.0.9",
     "@types/mdx": "^2.0.14",
     "@webcam/react": "^1.1.0",
     "algoliasearch": "^5.55.0",

packages/newdocs/content/functions/hooks/useNotification.meta.json

@@ -6,7 +6,7 @@ usage: medium
 type: hook
 isTest: true
 isDemo: true
-lastModifiedTime: 1780662926000
+lastModifiedTime: 1783690580000
 ---
 
 import metadata from './useField.meta.json';

packages/newdocs/generated/demos/hooks/useNotification.demo.tsx

@@ -4,9 +4,9 @@ description: Hook to manage a form
 category: state
 usage: medium
 type: hook
-isTest: false
+isTest: true
 isDemo: true
-lastModifiedTime: 1783684565236
+lastModifiedTime: 1783690580000
 ---
 
 import metadata from './useForm.meta.json';