### Install Dependencies with pnpm

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/README.md

Runs the pnpm install command to download and set up all required project dependencies listed in the package.json file.

```Shell
pnpm i
```

--------------------------------

### Start Development Server with pnpm

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/README.md

Executes the pnpm dev script defined in the package.json to start the local development server for the documentation site, typically accessible via a web browser.

```Shell
pnpm dev
```

--------------------------------

### Installing Frappe React SDK with npm (Bash)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Command to install the frappe-react-sdk library using the npm package manager. This is a prerequisite for using the library in a React project.

```bash
npm install frappe-react-sdk
```

--------------------------------

### Installing frappe-react-sdk (Bash)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/setup/dev_server.mdx

Instructions on how to add the `frappe-react-sdk` package to your project using either npm or yarn package managers. This is the first step to using the library.

```bash
npm install frappe-react-sdk
```

```bash
yarn add frappe-react-sdk
```

--------------------------------

### Run SPA in Development Mode (Bash)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/setup/doppio.mdx

Provides the commands needed to run the SPA locally during development. This involves starting the Frappe bench server and then starting the SPA's development server using yarn.

```bash
bench start
```

```bash
yarn dev
```

--------------------------------

### Initializing FrappeProvider (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/setup/dev_server.mdx

Demonstrates the basic setup of the `FrappeProvider` component, which wraps your application to provide access to the SDK's features. It shows how to optionally specify the Frappe server URL if it's different from the web app's host.

```tsx
import { FrappeProvider } from "frappe-react-sdk";

function App() {
    /** The URL is an optional parameter. Only use it if the Frappe server is hosted on a separate URL **/
  return (
    <FrappeProvider url='https://my-frappe-server.frappe.cloud'>
    {/** Your other app components **/}
    </FrappeProvider>
  )
}
```

--------------------------------

### Installing Frappe React SDK with yarn (Bash)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Command to install the frappe-react-sdk library using the yarn package manager. This is an alternative prerequisite for using the library in a React project if yarn is preferred over npm.

```bash
yarn add frappe-react-sdk
```

--------------------------------

### Making a GET request with frappe-react-sdk

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Shows how to perform a GET request to a Frappe endpoint using the `call.get` method. Includes passing search parameters and handling the response.

```JavaScript
const searchParams = {
  doctype: 'Currency',
  txt: 'IN',
};
call
  .get('frappe.desk.search_link', searchParams)
  .then((result) => console.log(result))
  .catch((error) => console.error(error));
```

--------------------------------

### Install Doppio Frappe App (Bash)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/setup/doppio.mdx

Installs the Doppio Frappe application into your bench directory using the `bench get-app` command. This adds the necessary Frappe app and enables custom bench CLI commands for managing SPAs.

```bash
bench get-app https://github.com/NagariaHussain/doppio
```

--------------------------------

### Fetching documents with useFrappeGetDocList (Pagination) - TSX

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/database/get_list.mdx

Illustrates fetching documents with pagination using `useFrappeGetDocList`. It fetches specific fields (`name`, `email`), sets a limit, and uses a state variable (`pageIndex`) to control the starting point for pagination, with a button to load the next page.

```tsx
type UserItem = {
    name: string,
    email: string
}
export const MyDocumentList = () => {
    const [pageIndex, setPageIndex] = useState(0)
    const { data, error, isValidating, isLoading } = useFrappeGetDocList<UserItem>("User" , {
        fields: ["name", "email"],
        limit_start: pageIndex,
        /** Number of documents to be fetched. Default is 20  */
        limit: 10,
        /** Sort results by field and order  */
        orderBy: {
            field: "creation",
            order: 'desc'
        }
    });

    if (isLoading) {
        return <>Loading</>
    }
    if (error) {
        return <>{JSON.stringify(error)}</>
    }
    if (data) {
        return <div>
            <ul>
            {
                data.map(({name, email}) => <li>{name} - {email}</li>)
            }
            </ul>
            <button onClick={() => setPageIndex(pageIndex + 10)}>Next page</button>
        </div>
    }
    return null
}
```

--------------------------------

### Fetching documents with useFrappeGetDocList (Basic) - TSX

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/database/get_list.mdx

Shows a basic example of using `useFrappeGetDocList` to fetch a list of documents (Users) with only the required `doctype` parameter. It fetches the default field (`name`) and displays the list.

```tsx
export const MyDocumentList = () => {
  const { data, error, isValidating } = useFrappeGetDocList<string>('User');

  if (isValidating) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (data) {
    return (
      <ul>
        {data.map((username) => (
          <li>{username}</li>
        ))}
      </ul>
    );
  }
  return null;
};
```

--------------------------------

### Fetching documents with useFrappeGetDocList (Full Options) - TSX

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/database/get_list.mdx

Demonstrates fetching documents using `useFrappeGetDocList` with various optional parameters like fields, filters, pagination, sorting, and dictionary format. Includes handling loading, error, and data states, and a reload button.

```tsx
export const MyDocumentList = () => {
  const { data, error, isValidating, mutate } = useFrappeGetDocList<T>(
    'DocType',
    {
      /** Fields to be fetched - Optional */
      fields: ['name', 'creation'],
      /** Filters to be applied - SQL AND operation */
      filters: [['creation', '>', '2021-10-09']],
      /** Filters to be applied - SQL OR operation */
      orFilters: [],
      /** Fetch from nth document in filtered and sorted list. Used for pagination  */
      limit_start: 5,
      /** Number of documents to be fetched. Default is 20  */
      limit: 10,
      /** Sort results by field and order  */
      orderBy: {
        field: 'creation',
        order: 'desc',
      },
      /** Fetch documents as a dictionary */
      asDict: false,
    }
  );

  if (isValidating) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (data) {
    return (
      <p>
        {JSON.stringify(data)}
        <button onClick={() => mutate()}>Reload</button>
      </p>
    );
  }
  return null;
};
```

--------------------------------

### Making a PUT request with frappe-react-sdk

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Provides an example of making a PUT request using `call.put`. Shows how to update fields of a document by specifying the DocType, name, fieldname, and value.

```JavaScript
const updatedFields = {
  doctype: 'User',
  name: 'Administrator',
  fieldname: 'interest',
  value: 'Frappe Framework, ERPNext',
};
call
  .put('frappe.client.set_value', updatedFields)
  .then((result) => console.log(result))
  .catch((error) => console.error(error));
```

--------------------------------

### Fetching Filtered Document Count with useFrappeGetDocCount (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/database/get_list.mdx

Illustrates how to use the `useFrappeGetDocCount` hook to fetch a document count filtered by specific criteria. This example fetches the count of 'User' documents where the 'enabled' field is true. Includes handling for loading and error states.

```TSX
export const DocumentCount = () => {
  const { data, error, isLoading } = useFrappeGetDocCount('User', [
    ['enabled', '=', true],
  ]);

  if (isLoading) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (data) {
    return <p>{data} enabled users</p>;
  }
  return null;
};
```

--------------------------------

### Fetching Document List with useFrappeGetDocList (React/TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Provides an example of using the useFrappeGetDocList hook to fetch a list of documents. It demonstrates how to pass arguments for filtering, sorting, pagination, and selecting fields, and handles loading, error, and data states. A reload button using mutate is also included.

```tsx
export const MyDocumentList = () => {
  const { data, error, isValidating, mutate } = useFrappeGetDocList<T>(
    'DocType',
    {
      /** Fields to be fetched - Optional */
      fields: ['name', 'creation'],
      /** Filters to be applied - SQL AND operation */
      filters: [['creation', '>', '2021-10-09']],
      /** Filters to be applied - SQL OR operation */
      orFilters: [],
      /** Fetch from nth document in filtered and sorted list. Used for pagination  */
      limit_start: 5,
      /** Number of documents to be fetched. Default is 20  */
      limit: 10,
      /** Sort results by field and order  */
      orderBy: {
        field: 'creation',
        order: 'desc',
      },
      /** Fetch documents as a dictionary */
      asDict: false,
    },
    {
      /** SWR Configuration Options - Optional **/
    }
  );

  if (isValidating) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (data) {
    return (
      <p>
        {JSON.stringify(data)}
        <button onClick={() => mutate()}>Reload</button>
      </p>
    );
  }
  return null;
};

```

--------------------------------

### Example Component Using useFrappeAuth Hook (JSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/authentication.mdx

This component demonstrates how to use the `useFrappeAuth` hook to display the current user state and provide buttons for login, logout, and fetching the current user. It shows how to access the hook's returned values like `currentUser`, `isLoading`, `login`, and `logout`.

```jsx
export const MyAuthComponent = () => {
  const {
    currentUser,
    isValidating,
    isLoading,
    login,
    logout,
    error,
    updateCurrentUser,
    getUserCookie,
  } = useFrappeAuth();

  if (isLoading) return <div>loading...</div>;

  // render user
  return (
    <div>
      {currentUser}
      <button onClick={() => login('administrator', 'admin')}>Login</button>
      <button onClick={logout}>Logout</button>
      <button onClick={updateCurrentUser}>Fetch current user</button>
    </div>
  );
};
```

--------------------------------

### Using useFrappeGetDocCount with Filters and Options (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/database/get_list.mdx

Demonstrates fetching a document count for a specific doctype ('User') with filters, enabling/disabling server-side caching and debugging, and providing SWR configuration options. Includes handling loading, error states, displaying the data, and a button to manually refetch the data using the `mutate` function.

```TSX
export const DocumentCount = () => {
  const { data, error, isValidating, mutate } = useFrappeGetDocCount(
    'User',
    /** Filters **/
    [['enabled', '=', true]],
    /** Cache the result on server **/
    false,
    /** Print debug logs on server **/
    false,
    {
      /** SWR Configuration Options - Optional **/
    }
  );

  if (isValidating) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (data) {
    return (
      <p>
        {data} enabled users
        <Button onClick={() => mutate()}>Reload</Button>
      </p>
    );
  }
  return null;
};
```

--------------------------------

### Fetch Total Document Count (Basic) - Frappe React SDK (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

A simple example using useFrappeGetDocCount to fetch the total number of documents for a given DocType ('User') without any filters or optional parameters. It displays the total count.

```tsx
export const DocumentCount = () => {
  const { data, error, isValidating } = useFrappeGetDocCount('User');

  if (isValidating) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (data) {
    return <p>{data} total users</p>;
  }
  return null;
};
```

--------------------------------

### Fetching Single Document with useFrappeGetDoc (React/TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Illustrates fetching a single document using the useFrappeGetDoc hook. It shows how to handle loading, error, and data states, and includes a button to manually trigger a data reload using the mutate function. The example fetches a 'User' document named 'Administrator'.

```tsx
export const MyDocumentData = () => {
  const { data, error, isValidating, mutate } = useFrappeGetDoc<T>(
    'User',
    'Administrator',
    {
      /** SWR Configuration Options - Optional **/
    }
  );

  if (isValidating) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (data) {
    return (
      <p>
        {JSON.stringify(data)}
        <button onClick={() => mutate()}>Reload</button>
      </p>
    );
  }
  return null;
};

```

--------------------------------

### Making GET Request with useFrappeGetCall (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/api_calls/get.mdx

This snippet shows a React component that uses the `useFrappeGetCall` hook to fetch a specific field value ('interest') for a user ('Administrator') from the 'User' doctype. It demonstrates handling the loading, error, and data states returned by the hook.

```tsx
export const MyDocumentGetCall = () => {
  const { data, error, isLoading, isValidating, mutate } = useFrappeGetCall(
    /** method **/
    'frappe.client.get_value',
    /** params **/
    {
      doctype: 'User',
      fieldname: 'interest',
      filters: {
        name: 'Administrator',
      },
    }
    /** SWR Key - Optional **/
    /** SWR Configuration Options - Optional **/
  );

  if (isLoading) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (data) {
    return <p>{data.message}</p>;
  }
  return null;
};
```

--------------------------------

### Fetching Total Document Count with useFrappeGetDocCount (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/database/get_list.mdx

Shows the basic usage of the `useFrappeGetDocCount` hook to fetch the total number of documents for a specified doctype ('User') without any filters or additional options. Includes basic handling for loading and error states.

```TSX
export const DocumentCount = () => {
  const { data, error, isValidating } = useFrappeGetDocCount('User');

  if (isValidating) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (data) {
    return <p>{data} total users</p>;
  }
  return null;
};
```

--------------------------------

### Example Usage of useSearch Hook in React Component

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/search.mdx

This React component demonstrates how to use the `useSearch` hook to implement a search input with suggestions. It fetches search results for the 'Item' doctype based on user input, displays them in a dropdown list, and updates the input field when a suggestion is clicked. It requires the `useSearch` hook and React's `useState` hook.

```tsx
export const Search = () => {

  const [searchText, setSearchText] = useState('');
  const { result } = useSearch('Item', searchText);

  const handleSearchTextChange = (e) => {
    setSearchText(e.target.value);
  };

  const handleSuggestionClick = (suggestion) => {
    setSearchText(suggestion.title);
    // Perform additional action based on the selected suggestion
  };

  return (
    <div>
      <input
        type="text"
        value={searchText}
        onChange={handleSearchTextChange}
        placeholder="Search..."
      />
      {result.length > 0 && (
        <ul className="dropdown-menu">
          {result.map((item) => (
            <li key={item.id} onClick={() => handleSuggestionClick(item)}>
              {item.title}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};
```

--------------------------------

### Example Component Using useFrappePostCall (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/api_calls/post.mdx

This React functional component demonstrates the usage of the `useFrappePostCall` hook to execute a Frappe method via a POST request. It initializes the hook with the target method name, provides a function to trigger the call with specific parameters, and renders different UI based on the loading, error, or result state of the request. It also includes a reset function.

```tsx
export const MyDocumentPostCall = () => {
  const { call, result, loading, error, isCompleted, reset } = useFrappePostCall(
    /** method **/
    'frappe.client.set_value'
  );

  const generateRandomNumber = () => {
    call({
      //** params **/
      doctype: 'User',
      name: 'Administrator',
      fieldname: 'interest',
      value: Math.random(),
    });
  };

  const resetCall = () => {
    reset();
  };

  if (loading) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (result) {
    return <p>{result}</p>;
  }
  return null;
};
```

--------------------------------

### Deleting a Frappe Document using useFrappeDeleteCall (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/api_calls/delete.mdx

This React component demonstrates the usage of the `useFrappeDeleteCall` hook to perform a document deletion in Frappe. It initializes the hook with the 'frappe.client.delete' method, provides a function `deleteDoc` to trigger the API call with specific `doctype` and `name` parameters, and includes basic state handling to display loading, error, or success messages.

```tsx
export const MyDocumentDeleteCall = () => {
  const { call, result, loading, error, isCompleted, reset } = useFrappeDeleteCall(
    /** method **/
    'frappe.client.delete'
  );

  const deleteDoc = () => {
    call({
      //** params **/
      doctype: 'User',
      name: 'Administrator',
    });
  };

  const resetCall = () => {
    reset();
  };

  if (loading) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (result) {
    return <p>{result}</p>;
  }
  return null;
};
```

--------------------------------

### Set Up New React/Vue SPA with Doppio (Bash)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/setup/doppio.mdx

Runs the `bench add-spa` command to set up a new Single Page Application (React or Vue) within your Frappe app. It prompts for SPA name, framework, and optionally includes flags for Tailwind CSS and TypeScript.

```bash
bench add-spa --app <app-name> [--tailwindcss] [--typescript]
```

```bash
bench add-spa
```

--------------------------------

### Initializing FrappeProvider with URL (JSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Demonstrates how to wrap the main application component with FrappeProvider to initialize the SDK. The url prop is used to specify the Frappe server address when it's different from the frontend application's host.

```jsx
import { FrappeProvider } from "frappe-react-sdk";

function App() {
    /** The URL is an optional parameter. Only use it if the Frappe server is hosted on a separate URL **/
  return (
    <FrappeProvider url='https://my-frappe-server.frappe.cloud'>
    {/** Your other app components **/
    }
    </FrappeProvider>
  )

}
```

--------------------------------

### Making a POST request with frappe-react-sdk

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Illustrates how to make a POST request to a Frappe endpoint using `call.post`. Demonstrates setting values for a document by providing necessary parameters.

```JavaScript
const updatedFields = {
  doctype: 'User',
  name: 'Administrator',
  fieldname: 'interest',
  value: 'Frappe Framework, ERPNext',
};
call
  .post('frappe.client.set_value', updatedFields)
  .then((result) => console.log(result))
  .catch((error) => console.error(error));
```

--------------------------------

### Uploading a file with frappe-react-sdk

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Demonstrates how to upload a file using the `file.uploadFile` method. Includes setting optional file arguments like privacy, folder, associated document, and a progress callback.

```JavaScript
const myFile; //Your File object

const fileArgs = {
  /** If the file access is private then set to TRUE (optional) */
  "isPrivate": true,
  /** Folder the file exists in (optional) */
  "folder": "Home",
  /** File URL (optional) */
  "file_url": "",
  /** Doctype associated with the file (optional) */
  "doctype": "User",
  /** Docname associated with the file (mandatory if doctype is present) */
  "docname": "Administrator",
  /** Field to be linked in the Document **/
  "fieldname" : "image"
}

file.uploadFile(
            myFile,
            fileArgs,
            /** Progress Indicator callback function **/
            (completedBytes, totalBytes) => console.log(Math.round((c / t) * 100), " completed")
        )
        .then(() => console.log("File Upload complete"))
        .catch(e => console.error(e))
```

--------------------------------

### Initializing FrappeProvider with Token Authentication (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/setup/dev_server.mdx

Shows how to configure the `FrappeProvider` to use token-based authentication. It includes parameters for enabling token usage, providing the token value (e.g., from local storage), and specifying the token type (e.g., "Bearer").

```tsx
import { FrappeProvider } from "frappe-react-sdk";

function App() {

  /** The URL is an optional parameter. Only use it if the Frappe server is hosted on a separate URL **/
  return (
    <FrappeProvider url='https://my-frappe-server.frappe.cloud' tokenParams={
        useToken: true,
        // Pass a custom function that returns the token as a string - this could be fetched from LocalStorage or auth providers like Firebase, Auth0 etc.
        token: getTokenFromLocalStorage(),
        // This can be "Bearer" or "token"
        type: "Bearer"
    } >
      {/** Your other app components **/}
    </FrappeProvider>
  );
}
```

--------------------------------

### Create Document - Frappe React SDK (JS)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Shows how to create a new document for a specified DocType ('My Custom DocType') using the db.createDoc method. It includes passing the document fields and handling the promise resolution and rejection.

```js
db.createDoc('My Custom DocType', {
  name: 'Test',
  test_field: 'This is a test field',
})
  .then((doc) => console.log(doc))
  .catch((error) => console.error(error));
```

--------------------------------

### Initializing FrappeProvider with Token Auth (JSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Shows how to initialize FrappeProvider for token-based authentication. The tokenParams prop is used to enable token usage, provide the token value (e.g., from local storage), and specify the token type (e.g., "Bearer").

```jsx
import { FrappeProvider } from 'frappe-react-sdk';

function App() {

  /** The URL is an optional parameter. Only use it if the Frappe server is hosted on a separate URL **/
  return (
    <FrappeProvider url='https://my-frappe-server.frappe.cloud' tokenParams={
        useToken: true,
        // Pass a custom function that returns the token as a string - this could be fetched from LocalStorage or auth providers like Firebase, Auth0 etc.
        token: getTokenFromLocalStorage(),
        // This can be "Bearer" or "token"
        type: "Bearer"
    } >
      {/** Your other app components **/
    }
    </FrappeProvider>
  );
}
```

--------------------------------

### Fetch Document List (Basic) - Frappe React SDK (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Demonstrates fetching the first 20 documents of a specified DocType ('User') using useFrappeGetDocList without providing optional parameters like fields or filters. It only fetches the default 'name' field and handles loading and error states.

```tsx
export const MyDocumentList = () => {
  const { data, error, isValidating } = useFrappeGetDocList<string>('User');

  if (isValidating) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (data) {
    return (
      <ul>
        {data.map((username) => (
          <li>{username}</li>
        ))}
      </ul>
    );
  }
  return null;
};
```

--------------------------------

### Fetch Document List with Pagination & Fields - Frappe React SDK (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Shows how to fetch a list of documents ('User') with specific fields ('name', 'email') and implement basic pagination using useFrappeGetDocList. It includes state management for the page index and defines a type for the fetched data.

```tsx
type UserItem = {
    name: string,
    email: string
}
export const MyDocumentList = () => {
    const [pageIndex, setPageIndex] = useState(0)
    const { data, error, isValidating } = useFrappeGetDocList<UserItem>("User" , {
        fields: ["name", "email"],
        limit_start: pageIndex,
        /** Number of documents to be fetched. Default is 20  */
        limit: 10,
        /** Sort results by field and order  */
        orderBy: {
            field: "creation",
            order: 'desc'
        }
    });

    if (isValidating) {
        return <>Loading</>
    }
    if (error) {
        return <>{JSON.stringify(error)}</>
    }
    if (data) {
        return <div>
            <ul>
            {
                data.map({name, email} => <li>{name} - {email}</li>)
            }
            </ul>
            <button onClick={() => setPageIndex(pageIndex + 10)}>Next page</button>
        </div>
    }
    return null
}
```

--------------------------------

### Using useFrappeAuth Hook (React/JSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Demonstrates how to use the useFrappeAuth hook to access user state (currentUser, isLoading, error), validation status (isValidating), and authentication functions (login, logout, updateCurrentUser, getUserCookie). It shows a basic component rendering the user state and providing buttons for authentication actions.

```jsx
export const MyAuthComponent = () => {
  const {
    currentUser,
    isValidating,
    isLoading,
    login,
    logout,
    error,
    updateCurrentUser,
    getUserCookie,
  } = useFrappeAuth();

  if (isLoading) return <div>loading...</div>;

  // render user
  return (
    <div>
      {currentUser}
      <button onClick={() => login('administrator', 'admin')}>Login</button>
      <button onClick={logout}>Logout</button>
      <button onClick={updateCurrentUser}>Fetch current user</button>
    </div>
  );
};
```

--------------------------------

### Fetch Document Count with Filters & Options - Frappe React SDK (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Illustrates fetching the count of documents ('User') that match specific filters ([['enabled', '=', true]]) using useFrappeGetDocCount. It also shows how to pass optional parameters like cache, debug, and SWR configuration, and includes a button to manually trigger a re-fetch.

```tsx
export const DocumentCount = () => {
  const { data, error, isValidating, mutate } = useFrappeGetDocCount(
    'User',
    /** Filters **/
    [['enabled', '=', true]],
    /** Cache the result on server **/
    false,
    /** Print debug logs on server **/
    false,
    {
      /** SWR Configuration Options - Optional **/
    }
  );

  if (isValidating) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (data) {
    return (
      <p>
        {data} enabled users
        <Button onClick={() => mutate()}>Reload</Button>
      </p>
    );
  }
  return null;
};
```

--------------------------------

### Fetching a User Document with useFrappeGetDoc (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/database/read.mdx

This snippet demonstrates how to use the `useFrappeGetDoc` hook within a React functional component to fetch the 'Administrator' user document. It shows how to handle loading and error states, display the fetched data, and provide a button to manually refetch the data.

```TypeScript
export const MyDocumentData = () => {
  const { data, error, isValidating, isLoading, mutate } = useFrappeGetDoc<T>(
    'User',
    'Administrator',
  );

  if (isLoading) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (data) {
    return (
      <p>
        {JSON.stringify(data)}
        <button disabled={isValidating} onClick={() => mutate()}>Reload</button>
      </p>
    );
  }
  return null;
};
```

--------------------------------

### Basic File Upload using useFrappeFileUpload (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/file_uploads.mdx

Demonstrates how to use the `useFrappeFileUpload` hook to upload a single file. It shows handling file input, calling the `upload` function with required arguments like `doctype`, `docname`, and `fieldname`, and managing the hook's state properties (`loading`, `progress`, `error`, `isCompleted`, `reset`) to provide user feedback.

```tsx
export const FileUpload = () => {

  const { upload, error, loading, progress, isCompleted, reset } = useFrappeFileUpload();

  const [file, setFile] = useState<File>();

  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files[0];
    if (file) {
      upload(file, {
        isPrivate: true,
        doctype: "User",
        docname: "john@cena.com",
        fieldname: "user_image",
      })
      .then((r) => {
        console.log(r.file_url);
        // Reset the state of the hook
        reset();
      });
    }
  };

  return (
    <div>
      <input type="file" onChange={(e) => setFile(e)} />
      <button onClick={handleUpload}>Upload</button>

      {loading && (
        <div>
          <p>Uploading...</p>
          <p>{progress}%</p>
        </div>
      )}

      {error && <p>{error}</p>}

      {isCompleted && <p>Upload Complete</p>}
    </div>
  );
};
```

--------------------------------

### Making a DELETE request using PUT with frappe-react-sdk

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Shows how to make a request to delete a document using `call.put` targeting the `frappe.client.delete` endpoint. Includes passing document details and handling the response.

```JavaScript
const documentToBeDeleted = {
  doctype: 'Tag',
  name: 'Random Tag',
};
call
  .put('frappe.client.delete', documentToBeDeleted)
  .then((result) => console.log(result))
  .catch((error) => console.error(error));
```

--------------------------------

### Create Document and Attach File using Frappe Hooks (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/file_uploads.mdx

Illustrates a workflow combining `useFrappeCreateDoc`, `useFrappeFileUpload`, and `useFrappeUpdateDoc`. It shows how to first create a new document (e.g., 'User'), then upload a file linked to that new document using its `docname`, and finally update the document with the uploaded file's URL.

```tsx
export const CreateUser = () => {

  const { upload, error, loading } = useFrappeFileUpload();

  const { createDoc } = useFrappeCreateDoc();

  const { updateDoc } = useFrappeUpdateDoc();

  const [email, setEmail] = useState<string>("");
  const [firstName, setFirstName] = useState<string>("");
  const [file, setFile] = useState<File>();

  const createUser = () => {
    const file = e.target.files[0];
    if (file) {
      createDoc("User", {
        email: email,
        first_name: first_name,
      })
        .then((doc) => {
          return upload(file, {
            is_private: 1,
            doctype: "User",
            docname: doc.name,
            fieldname: "user_image",
          });
        })
        .then((file) => {
          return updateDoc("User", user, {
            user_image: file.file_url,
          });
        })
        .then(() => {
          alert("User created");
        });
    }
  };

  return (
    <div>
      {loading && <p>Uploading...</p>}
      {error && <p>{error}</p>}
      <input
        type="text"
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setEmail(e.target.value)
        }
      />
      <input
        type="text"
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setFirstName(e.target.value)
        }
      />
      <input type="file" name="attachment" onChange={(e) => setFile(e)} />
      <button onClick={createUser}>Create</button>
    </div>
  );
};
```

--------------------------------

### Update Document - Frappe React SDK (JS)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Illustrates how to update an existing document by its DocType ('My Custom DocType') and name ('Test') using the db.updateDoc method. It shows how to pass the fields to be updated and handle the promise result.

```js
db.updateDoc('My Custom DocType', 'Test', {
  test_field: 'This is an updated test field.',
})
  .then((doc) => console.log(doc))
  .catch((error) => console.error(error));
```

--------------------------------

### Importing Callout Component (JavaScript)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/api_calls.mdx

Imports the `Callout` component from the `nextra-theme-docs` package. This component is likely used for displaying important notes or warnings within the documentation.

```JavaScript
import { Callout } from 'nextra-theme-docs'
```

--------------------------------

### Deleting a document using frappe-react-sdk

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Demonstrates how to delete a specific document by passing its DocType and name to the `deleteDoc` method of the `db` object. Includes handling success and error responses.

```JavaScript
db.deleteDoc('My Custom DocType', 'Test')
  .then((response) => console.log(response.message)) // Message will be "ok"
  .catch((error) => console.error(error));
```

--------------------------------

### Listening to Frappe Event using useFrappeEventListener (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/realtime_events/events.mdx

Demonstrates how to use the `useFrappeEventListener` hook to subscribe to a specific Frappe event ('myEvent'). The hook takes the event name and a callback function that is executed when the event occurs, receiving the event data.

```tsx
export const MyEventListener = () => {
  useFrappeEventListener('myEvent', (data) => {
    // do something with the data
    if (data.status === 'success') {
      console.log('success');
    }
  });
  return null;
};
```

--------------------------------

### Importing Callout Component (JavaScript)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/database/create.mdx

Imports the `Callout` component from the `nextra-theme-docs` package. This component is typically used within Nextra documentation pages to display styled information boxes like notes, warnings, or errors.

```JavaScript
import { Callout } from 'nextra-theme-docs'
```

--------------------------------

### Fetch Document Count with Filters - Frappe React SDK (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/README.md

Demonstrates fetching the count of documents ('User') that satisfy a specific filter condition ([['enabled', '=', true]]) using useFrappeGetDocCount. This is a simplified version compared to the previous snippet, focusing only on filters.

```tsx
export const DocumentCount = () => {
  const { data, error, isValidating } = useFrappeGetDocCount('User', [
    ['enabled', '=', true],
  ]);

  if (isValidating) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (data) {
    return <p>{data} enabled users</p>;
  }
  return null;
};
```

--------------------------------

### Updating Frappe Document Field using useFrappePutCall (TSX)

Source: https://github.com/the-commit-company/frappe-react-sdk/blob/main/docs/pages/api_calls/put.mdx

This snippet demonstrates how to use the useFrappePutCall hook to update a specific field of a Frappe document. It initializes the hook with the 'frappe.client.set_value' method and provides a function to trigger the call with parameters specifying the document type, name, fieldname, and the new value. The component handles and displays the loading, error, and result states of the API call.

```tsx
export const MyDocumentPutCall = () => {
  const { call, result, loading, error, reset, isCompleted } = useFrappePutCall(
    /** method **/
    'frappe.client.set_value'
  );

  const generateRandomNumber = () => {
    call({
      //** params **/
      doctype: 'User',
      name: 'Administrator',
      fieldname: 'interest',
      value: Math.random(),
    });
  };

  const resetCall = () => {
    reset();
  };

  if (loading) {
    return <>Loading</>;
  }
  if (error) {
    return <>{JSON.stringify(error)}</>;
  }
  if (result) {
    return <p>{result}</p>;
  }
  return null;
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.