useExport with download: false - Refine

kapa.ai

K

kapa.ai•9/19/24, 9:03 PM

Hi @geoffatsource. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai

K

kapa.ai•9/19/24, 9:03 PM

----------------------
To use the

useExport

useExport

hook with the

download

download

option set to

false

false

and get the CSV data without triggering a download, you can follow these steps:

Set up the
useExport
useExport
hook: Configure the

useExport

useExport

hook with the

download

download

option set to

false

false

.

Use the
triggerExport
triggerExport
function: Call the
```
triggerExport
```
```
triggerExport
```
function to initiate the export process. Since
```
download
```
```
download
```
is set to
```
false
```
```
false
```
, the data will not be downloaded automatically.
Handle the returned data: The
```
triggerExport
```
```
triggerExport
```
function will return the CSV data, which you can then handle as needed.

Here is an example of how you can achieve this:

kapa.ai

K

kapa.ai•9/19/24, 9:03 PM

In this example:

The
```
useExport
```
```
useExport
```
hook is configured with .
The function calls
```
triggerExport
```
```
triggerExport
```
and logs the CSV data to the console. You can replace the
```
console.log
```
```
console.log
```
statement with any other logic to handle the CSV data as needed.

For more details, you can refer to the useExport documentation (https://refine.dev/docs/core/hooks/utilities/use-export/#download).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

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

kapa.ai

K

kapa.ai•9/19/24, 9:03 PM

@1014305963219615754 kapa.ai is still learning and improving, please let us know how it did by reacting below

import React from "react";
import { useExport } from "@refinedev/core";

interface IProduct {
  id: number;
  name: string;
  description: string;
  category: string;
}

export const HomePage = () => {
  const { triggerExport, isLoading } = useExport<IProduct>({
    resource: "products",
    mapData: (item) => {
      return {
        ...item,
        category: JSON.stringify(item.category),
      };
    },
    download: false, // Set download to false
  });

  const handleExport = async () => {
    const csvData = await triggerExport();
    console.log(csvData); // Handle the CSV data as needed
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
        padding: "16px",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
        <h2>Products</h2>
        <button onClick={handleExport} disabled={isLoading}>
          {isLoading ? "Exporting..." : "Export Products"}
        </button>
      </div>
    </div>
  );
};

import React from "react";
import { useExport } from "@refinedev/core";

interface IProduct {
  id: number;
  name: string;
  description: string;
  category: string;
}

export const HomePage = () => {
  const { triggerExport, isLoading } = useExport<IProduct>({
    resource: "products",
    mapData: (item) => {
      return {
        ...item,
        category: JSON.stringify(item.category),
      };
    },
    download: false, // Set download to false
  });

  const handleExport = async () => {
    const csvData = await triggerExport();
    console.log(csvData); // Handle the CSV data as needed
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
        padding: "16px",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
        <h2>Products</h2>
        <button onClick={handleExport} disabled={isLoading}>
          {isLoading ? "Exporting..." : "Export Products"}
        </button>
      </div>
    </div>
  );
};