React json2excel

A simple and flexible React library for exporting JSON data to Excel files. Allows exporting data through a customizable button component or via a direct function.

Install

npm install react-json2excel

Using Button Component

import { JsonToExcel } from "react-json2excel";

class SmapleComponent extends Component {
  render() {
    return (
      <JsonToExcel
        title="Download as Excel"
        data={[{ test: "test" }]}
        fileName="sample-file"
        btnClassName="custom-classname"
      />
    );
  }
}

Usage

import { JsonToExcel } from "react-json2excel";

// Sample data - product inventory
const productInventory = [
  { id: 1, name: "Gaming Laptop", category: "Technology", price: 1200, stock: 15 },
  { id: 2, name: "Smartphone XL", category: "Technology", price: 800, stock: 22 },
  { id: 3, name: "Bluetooth Headphones", category: "Audio", price: 150, stock: 30 }
];

// Sample data - employees
const employeeData = [
  { id: "E001", name: "Maria Garcia", department: "Sales", salary: 45000, tenure: 3 },
  { id: "E002", name: "Carlos Rodriguez", department: "IT", salary: 55000, tenure: 5 },
  { id: "E003", name: "Ana Martinez", department: "Marketing", salary: 42000, tenure: 2 }
];

const App = () => {
  return (
    <div>
      <h1>Export Data to Excel</h1>
      
      <JsonToExcel
        title="Download Inventory"
        data={productInventory}
        fileName="product-inventory"
        btnClassName="btn-primary"
      />
      
      <JsonToExcel
        title="Export Employees"
        data={employeeData}
        fileName="employee-data"
        btnColor="#2196F3"
      />
    </div>
  );
};

export default App;

Using exportToExcel Method

import React from 'react';
import { exportToExcel } from 'react-json2excel';

// Monthly sales data
const monthlySales = [
  { month: "January", sales: 12500, customers: 45, region: "North" },
  { month: "February", sales: 14300, customers: 52, region: "North" },
  { month: "March", sales: 16800, customers: 61, region: "South" }
];

const SalesReport = () => {
  const handleDownload = () => {
    exportToExcel(monthlySales, 'monthly-sales-report');
  };

  return (
    <button onClick={handleDownload} className="download-btn">
      Generate Sales Report
    </button>
  );
};

export default SalesReport;

Using exportToExcel Method For Multiple sheets

• Data object should be as below
• exportToExcel(data, 'downloadfilename', true ) - should pass true

import React from 'react';
import { exportToExcel } from 'react-json2excel';

const MultiSheetExport = () => {
  // Data organized by sheets
  const reportData = [
    {
      sheetName: "Sales",
      details: [
        { product: "Laptop", quantity: 15, total: 18000 },
        { product: "Tablet", quantity: 23, total: 11500 },
        { product: "Smartphone", quantity: 42, total: 33600 }
      ]
    },
    {
      sheetName: "Customers",
      details: [
        { name: "TechCorp", contact: "John Perez", value: 25000 },
        { name: "InnovateSA", contact: "Maria Lopez", value: 18000 },
        { name: "DigitalMinds", contact: "Carlos Ruiz", value: 32000 }
      ]
    },
    {
      sheetName: "Summary",
      details: [
        { metric: "Total Sales", value: 63100, trend: "+15%" },
        { metric: "Active Customers", value: 35, trend: "+8%" },
        { metric: "Best Selling Product", value: "Smartphone", trend: "+22%" }
      ]
    }
  ];

  const handleMultiSheetDownload = () => {
    exportToExcel(reportData, 'complete-report', true);
  };

  return (
    <button onClick={handleMultiSheetDownload} className="multi-sheet-btn">
      Download Complete Report
    </button>
  );
};

export default MultiSheetExport;

PROPTYPES

| Prop | Type | Info | | ------------ | ------ | -------------------------------------------------------- | | title | String | name of the button | | btnClassName | String | class name added to the the button for css customization | | data | Array | array of objects | | fileName | String | download file name | | btnColor | String | color of button defatlt to #4CAF50 |

License

react-json2excel is licensed under the MIT License.

Contacto

LinkedIn hugo aragon