Merge pull request #453 from ozcnii/fix/useField-demo

fix: useField usage in demo examples

Author: debabin

packages/core/src/helpers/createContext/createContext.demo.tsx

@@ -8,13 +8,8 @@ const App = () => {
   const age = profileContext.useSelect((state) => state.age);
   const profile = profileContext.useSelect();
 
-  const nameField = useField({
-    initialValue: DEFAULT_PROFILE.name
-  });
-
-  const ageField = useField({
-    initialValue: DEFAULT_PROFILE.age
-  });
+  const nameField = useField(DEFAULT_PROFILE.name);
+  const ageField = useField(DEFAULT_PROFILE.age);
 
   return (
     <div className='rounded-lg p-4'>

packages/core/src/helpers/createEventEmitter/createEventEmitter.demo.tsx

@@ -26,13 +26,8 @@ const AgeFieldInfo = () => {
 };
 
 const Demo = () => {
-  const nameField = useField({
-    initialValue: DEFAULT_PROFILE.name
-  });
-
-  const ageField = useField({
-    initialValue: DEFAULT_PROFILE.age
-  });
+  const nameField = useField(DEFAULT_PROFILE.name);
+  const ageField = useField(DEFAULT_PROFILE.age);
 
   return (
     <div className='rounded-lg p-4'>

packages/core/src/helpers/createStore/createStore.demo.tsx

@@ -52,13 +52,8 @@ const AgeFieldInfo = () => {
 };
 
 const Demo = () => {
-  const nameField = useField({
-    initialValue: DEFAULT_PROFILE.name
-  });
-
-  const ageField = useField({
-    initialValue: DEFAULT_PROFILE.age
-  });
+  const nameField = useField(DEFAULT_PROFILE.name);
+  const ageField = useField(DEFAULT_PROFILE.age);
 
   return (
     <div className='rounded-lg p-4'>

packages/core/src/hooks/useMutation/useMutation.demo.tsx

@@ -3,7 +3,7 @@ import { useField, useList, useMutation } from '@siberiacancode/reactuse';
 const createUser = (name: string) => Promise.resolve({ name });
 
 const Demo = () => {
-  const nameField = useField({ initialValue: '' });
+  const nameField = useField('');
   const userList = useList([{ name: 'John' }]);
 
   const createUserMutation = useMutation(createUser);

packages/core/src/hooks/usePaint/usePaint.demo.tsx

@@ -5,8 +5,8 @@ import { useState } from 'react';
 
 const Demo = () => {
   const [color, setColor] = useState('#37d2e6');
-  const radiusInput = useField({ initialValue: '10' });
-  const opacityInput = useField({ initialValue: '1' });
+  const radiusInput = useField('10');
+  const opacityInput = useField('1');
 
   const radius = radiusInput.watch();
   const opacity = opacityInput.watch();

packages/core/src/hooks/useSet/useSet.demo.tsx

@@ -1,7 +1,7 @@
 import { useField, useSet } from '@siberiacancode/reactuse';
 
 const Demo = () => {
-  const scopeInput = useField({ initialValue: '' });
+  const scopeInput = useField('');
   const scopes = useSet(['@siberiacancode', '@siberiacancode-tests', '@shared']);
 
   return (
@@ -21,7 +21,7 @@ const Demo = () => {
       </div>
 
       <div className='mt-4 flex gap-2'>
-        {Array.from(scopes.value).map((scope, index) => (
+        {Array.from(scopes.value, (scope, index) => (
           <div key={index} className='cursor-pointer' onClick={() => scopes.remove(scope)}>
             <code>{scope}</code>
           </div>

packages/core/src/hooks/useSpeechSynthesis/useSpeechSynthesis.demo.tsx

@@ -2,11 +2,9 @@ import { useField, useMount, useSpeechSynthesis } from '@siberiacancode/reactuse
 import { useState } from 'react';
 
 const Demo = () => {
-  const textField = useField({
-    initialValue: 'Hello, everyone! Good morning!'
-  });
-  const pitchField = useField({ initialValue: 1 });
-  const rateField = useField({ initialValue: 1 });
+  const textField = useField('Hello, everyone! Good morning!');
+  const pitchField = useField(1);
+  const rateField = useField(1);
   const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([]);
   const [voice, setVoice] = useState<SpeechSynthesisVoice>();
 

packages/core/src/hooks/useWebSocket/useWebSocket.demo.tsx

@@ -8,7 +8,7 @@ interface Message {
 }
 
 const Demo = () => {
-  const messageInput = useField({ initialValue: '' });
+  const messageInput = useField('');
 
   const [messages, setMessages] = useState<Message[]>([
     { text: 'Connecting to chat...', type: 'server', date: new Date() }