@siamf/react-export NPM

@siamf/react-export

A React package that simplifies data exporting and clipboard management. It provides react component for printing documents, exporting data as PDF, Excel, and CSV, as well as copying text and structured data to the clipboard.

Small Size
All Export Formate
Export As PDF
Export As CSV
Export As Excel
Copy table data to Clipboard
Copy any text to clipboard
Excel or Sheet to JSON converter

What's new on version 4.1.1

Update CopyTextClipboard for managing copy status internally
Update CopyToClipboard for managing copy status internally
Now you will isCopied return props for both component
Added new props resetDuration for resetting time of copy status

Installation

$ npm i @siamf/react-export

import { ExportAsExcel, ExportAsPdf, ExportAsCsv, CopyToClipboard, CopyTextToClipboard, PrintDocument, ExcelToJson } from "@siamf/react-export";


//Export as Excel Sheet
<ExportAsExcel
    data={data}
    headers={["Name", "Age", "Something"]}
>
    {(props)=> (
      <button {...props}>
        Export as Excel
      </button>
    )}
</ExportAsExcel>

//Export as pdf
<ExportAsPdf
    data={data}
    headers={["CreatedBy", "Age", "Something Else"]}
    headerStyles={{ fillColor: "red" }}
    title="Sections List"
>
    {(props)=> (
      <button {...props}>
        Export as PDF
      </button>
    )}
</ExportAsPdf>

//Export as CSV
<ExportAsCsv
    data={data}
>
    {(props)=> (
      <button {...props}>Hello World</button>
    )}
</ExportAsCsv>

//Copy to clipboard (Array or Table)
<CopyToClipboard
    data={data}
    headers={["CreatedBy", "Age", "Something Else"]}
>
    {(props)=> (
      <button onClick={props.onClick}>
        {props.isCopied ? "Copied Document" : "Copy Document" }
      </button>
    )}
</CopyToClipboard>

//Copy to clipboard (text)
<CopyTextToClipboard text="Hello World">
    {(props)=> (
      <button onClick={props.onClick}>
        {props.isCopied ? "Copied Text" : "Copy Text"}
      </button>
    )}
</CopyTextToClipboard>


//Print data
<PrintDocument
    data={data}
    headers={["CreatedBy", "Age", "Something Else"]}
>
    {(props)=> (
      <button {...props}>
        Copy Text
      </button>
    )}
</PrintDocument>

//Excel to json converter or Read Excel File
<ExcelToJson>
    {({
        isDragging,
        dragProps,
        onFileUpload,
        error,
        data,
        file
    }) => (
        <div {...dragProps} onClick={onFileUpload}>
            Upload Excel File
        </div>
    )}
</ExcelToJson>