docs: options

Author: tmm

docs/pages/documentation/auth/use-auth-state-change.md

@@ -14,4 +14,4 @@ function Page() {
 }
 ```
 
-Note: Auth listener automatically cleaned up during [cleanup phase](https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup).
+Note: Auth listener is automatically cleaned up during the hook’s [cleanup phase](https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup).

docs/pages/documentation/auth/use-reset-password.md

@@ -2,22 +2,14 @@
 
 Sends reset request to email address.
 
-```js highlight=4,5,6,7,8,9
+```js highlight=4
 import { useResetPassword } from 'react-supabase'
 
 function Page() {
-  const [{ error, fetching }, resetPassword] = useResetPassword({
-    // Passing optional options
-    options: {
-      redirectTo: 'https://example.com/welcome',
-    },
-  })
+  const [{ error, fetching }, resetPassword] = useResetPassword()
 
   async function onClickResetPassword() {
-    const { error } = await resetPassword('user@example.com', {
-      // Override options from hook init
-      redirectTo: 'https://example.com/reset',
-    })
+    const { error } = await resetPassword('user@example.com')
   }
 
   if (error) return <div>Error sending email</div>
@@ -26,3 +18,23 @@ function Page() {
   return ...
 }
 ```
+
+## Passing options
+
+During hook initialization:
+
+```js
+const [{ error, fetching }, resetPassword] = useResetPassword({
+  options: {
+    redirectTo: 'https://example.com/welcome',
+  },
+})
+```
+
+Or execute function:
+
+```js
+const { error } = await resetPassword('user@example.com', {
+  redirectTo: 'https://example.com/reset',
+})
+```

docs/pages/documentation/auth/use-signin.md

@@ -2,28 +2,17 @@
 
 Log in existing user, or login via a third-party provider.
 
-```js highlight=4,5,6,7,8,9
+```js highlight=4
 import { useSignIn } from 'react-supabase'
 
 function Page() {
-  const [{ error, fetching, session, user }, signIn] = useSignIn({
-    // Passing optional options
-    options: {
-      redirectTo: 'https://example.com/dashboard',
-    },
-  })
+  const [{ error, fetching, session, user }, signIn] = useSignIn()
 
   async function onClickSignIn() {
-    const { error, session, user } = await signIn(
-      {
-        email: 'user@example.com',
-        password: 'foobarbaz',
-      },
-      {
-        // Override options from hook init
-        redirectTo: 'https://example.com/account',
-      },
-    )
+    const { error, session, user } = await signIn({
+      email: 'user@example.com',
+      password: 'foobarbaz',
+    })
   }
 
   if (error) return <div>Error signing in</div>
@@ -34,6 +23,32 @@ function Page() {
 }
 ```
 
+## Passing options
+
+During hook initialization:
+
+```js
+const [{ error, fetching, session, user }, signIn] = useSignIn({
+  options: {
+    redirectTo: 'https://example.com/dashboard',
+  },
+})
+```
+
+Or the execute function:
+
+```js
+const { error, session, user } = await signIn(
+  {
+    email: 'user@example.com',
+    password: 'foobarbaz',
+  },
+  {
+    redirectTo: 'https://example.com/account',
+  },
+)
+```
+
 ## Magic links
 
 Omit password from the execute function:
@@ -55,7 +70,7 @@ const [{ error, fetching, user, session }, signIn] = useSignIn({
 })
 ```
 
-Or the execute function:
+Or execute function:
 
 ```js
 const { error, session, user } = await signIn(

docs/pages/documentation/auth/use-signup.md

@@ -2,28 +2,17 @@
 
 Creates new user.
 
-```js highlight=4,5,6,7,8,9
+```js highlight=4
 import { useSignUp } from 'react-supabase'
 
 function Page() {
-  const [{ error, fetching, session, user }, signUp] = useSignUp({
-    // Passing optional options
-    options: {
-      redirectTo: 'https://example.com/dashboard',
-    },
-  })
+  const [{ error, fetching, session, user }, signUp] = useSignUp()
 
   async function onClickSignUp() {
-    const { error, session, user } = await signUp(
-      {
-        email: 'user@example.com',
-        password: 'foobarbaz',
-      },
-      {
-        // Override options from hook init
-        redirectTo: 'https://example.com/welcome',
-      },
-    )
+    const { error, session, user } = await signUp({
+      email: 'user@example.com',
+      password: 'foobarbaz',
+    })
   }
 
   if (error) return <div>Error signing up</div>
@@ -33,3 +22,29 @@ function Page() {
   return ...
 }
 ```
+
+## Passing options
+
+During hook initialization:
+
+```js
+const [{ error, fetching, session, user }, signUp] = useSignUp({
+  options: {
+    redirectTo: 'https://example.com/dashboard',
+  },
+})
+```
+
+Or execute function:
+
+```js
+const { error, session, user } = await signUp(
+  {
+    email: 'user@example.com',
+    password: 'foobarbaz',
+  },
+  {
+    redirectTo: 'https://example.com/welcome',
+  },
+)
+```

docs/pages/documentation/data/use-delete.md

@@ -1,38 +1,47 @@
 # useDelete
 
-Performs a DELETE on the table.
+Performs DELETE on table.
 
-```js highlight=4,5,6,7,8,9,10,11,12,13,14,15,16
+```js highlight=4
 import { useDelete } from 'react-supabase'
 
 function Page() {
-  const [
-    { count, data, error, fetching },
-    deleteTodos,
-  ] = useDelete(
-    'todos',
-    // Passing optional options
-    {
-      options: {
-        returning: 'represenation',
-        count: 'exact',
-      },
-    },
-  )
+  const [{ count, data, error, fetching }, deleteTodos] = useDelete('todos')
 
   async function onClickDelete(id) {
     const { count, data, error } = await deleteTodos(
       (query) => query.eq('id', id),
-      {
-        // Override options from hook init
-        returning: 'minimal',
-        count: 'estimated',
-      },
     )
   }
 
   return ...
 }
 ```
 
-Throws error during execute if `filter` is not passed during hook initialization or execute method directly.
+Throws error during execute if a filter is not passed during hook initialization or execute method.
+
+## Passing options
+
+During hook initialization:
+
+```js
+const [{ count, data, error, fetching }, deleteTodos] = useDelete('todos', {
+  filter: (query) => query.eq('status', 'completed'),
+  options: {
+    returning: 'represenation',
+    count: 'exact',
+  },
+})
+```
+
+Or execute function:
+
+```js
+const { count, data, error } = await deleteTodos(
+  (query) => query.eq('id', id),
+  {
+    returning: 'minimal',
+    count: 'estimated',
+  },
+)
+```

docs/pages/documentation/data/use-filter.md

@@ -1 +1,24 @@
 # useFilter
+
+Creates dynamic filter for using with other hooks.
+
+```js highlight=4,5,6,7,8,9,10,11
+import { useFilter, useSelect } from 'react-supabase'
+
+function Page() {
+  const filter = useFilter(
+    (query) =>
+      query
+        .eq('status', status)
+        .textSearch('name', `'exercise' & 'shopping'`)
+        .limit(10),
+    [status],
+  )
+  // Pass filter to other hooks
+  const [{ data }] = useSelect('todos', { filter })
+
+  return ...
+}
+```
+
+For an example, see [`useSelect` "Dynamic Filtering"](/documentation/data/use-select#dynamic-filtering).

docs/pages/documentation/data/use-insert.md

@@ -1,33 +1,44 @@
 # useInsert
 
-Performs an INSERT into the table.
+Performs INSERT into table.
 
-```js highlight=4,5,6,7,8,9,10,11,12,13
+```js highlight=4
 import { useInsert } from 'react-supabase'
 
 function Page() {
-  const [{ count, data, error, fetching }, insertTodo] = useInsert(
-    'todos',
-    // Passing optional options
-    {
-      options: {
-        returning: 'represenation',
-        count: 'exact',
-      },
-    },
-  )
-
-  async function onClickDelete(id) {
-    const { count, data, error } = await deleteTodos(
-      (query) => query.eq('id', id),
-      {
-        // Override options from hook init
-        returning: 'minimal',
-        count: 'estimated',
-      },
-    )
+  const [{ count, data, error, fetching }, insertTodos] = useInsert('todos')
+
+  async function onClickInsert(name) {
+    const { count, data, error } = await insertTodos({
+      name,
+    })
   }
 
   return ...
 }
 ```
+
+## Passing options
+
+During hook initialization:
+
+```js
+const [{ count, data, error, fetching }, insertTodos] = useInsert('todos', {
+  options: {
+    returning: 'represenation',
+    count: 'exact',
+  },
+})
+```
+
+Or execute function:
+
+```js
+const { count, data, error } = await insertTodos(
+  { name: 'Buy more cheese' },
+  {
+    count: 'estimated',
+    returning: 'minimal',
+  },
+)
+```