@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>

Options

ExportAsExcel

ExportAsPdf

StylesDefs

• font: 'helvetica'|'times'|'courier' = 'helvetica'
• fontStyle: 'normal'|'bold'|'italic'|'bolditalic' = 'normal'
• overflow: 'linebreak'|'ellipsize'|'visible'|'hidden' = 'linebreak'
• fillColor: Color? = null
• textColor: Color? = 20
• cellWidth: 'auto'|'wrap'|number = 'auto'
• minCellWidth: number? = 10
• minCellHeight: number = 0
• halign: 'left'|'center'|'right' = 'left'
• valign: 'top'|'middle'|'bottom' = 'top'
• fontSize: number = 10
• cellPadding: Padding = 10
• lineColor: Color = 10
• lineWidth: border = 0 // If 0, no border is drawn

Margin

• top: number
• right: number
• bottom: number
• left: number

Theme

You find this three type theme-

ExportAsCsv

CopyToClipboard

CopyTextToClipboard

PrintDocument

• Same as ExportAsPdf Component!

ExcelToJson

Props

Exported Options

Stay in touch

• Author - Siam Ahnaf
• Website - https://www.siamahnaf.com/
• Github - https://github.com/siamahnaf