@code530pro/react-json2excel

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