README.md

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

• Added onSuccess and onError props to ExportAsExcel, ExportAsPdf, and ExportAsCsv component
• Code optimizations
• Remove file upload component from this package, Instead I create another package @siamf/upload with more functionality and options. See the docs here
• Rename the component ExcelToJsonConverter to ExcelToJson
• Huge API change for ExcelToJson component. For more details, read the docs for this component.
• React 19 Support
• Package Update

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 {...props}>
        Copy Document
      </button>
    )}
</CopyToClipboard>

//Copy to clipboard (text)
<CopyTextToClipboard text="Hello World">
    {(props)=> (
      <button {...props}>
        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

Name	Types	Default
chilren	ReactNode (Required)
data	Array (Required)
headers	string[] (Required)
name	string (Optional)	reactExportTable
minColumnWidth	number (Optional)	15
fileName	string (Optional)	reactExportTable
onError	(error:Error)=>void (Optional)
onSuccess	()=>void (Optional)

ExportAsPdf

Name	Types	Default
chilren	ReactNode (Required)
data	Array (Required)
headers	string[] (Required)
foot	string[] (Optional)
title	string (Optional)
fileName	string (Optional)	reactExportTable
theme	"striped" | "grid" | "plain" (Optional)	"grid"
styles	StylesDefs (Optional)
headerStyles	StylesDefs (Optional)
footerStyles	StylesDefs (Optional)
margin	Margin (Optional)
orientation	Orientation (Optional). Format is- "landscape" | "portrait" | "l" | "p"
onError	(error:Error)=>void (Optional)
onSuccess	()=>void (Optional)

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

Name	Types	Default
chilren	ReactNode (Required)
data	Array (Required)
fileName	String (Optional)	Custom CSV File Name
onError	(error:Error)=>void (Optional)
onSuccess	()=>void (Optional)

CopyToClipboard

Name	Types	Default
chilren	ReactNode (Required)
data	Array (Required)
headers	string[] (Required)
onCopied	Function (Optional)	When copy will be success
onFailed	Funtion (Optional)	When copy will be failed

CopyTextToClipboard

Name	Types	Default
chilren	ReactNode (Required)
text	string (Required)
headers	string[] (Required)
onCopied	Function (Optional)	When copy will be success
onFailed	Funtion (Optional)	When copy will be failed

PrintDocument

• Same as ExportAsPdf Component!

ExcelToJson

Props

Name	Types	Description	Required/Optional
onRead	(data: Array) => void	For listening converted data	Required
value	Array	Default Value	Required
children	(props: ExportInterface) => React.ReactNode	UI for drop zone	Required
inputProps	React.HTMLProps	Input Props for input field	Optional
onChange	(file: File | null) => void	Listener for on file change	optional

Exported Options

Name	Types	Description
dragProps	object	Native element props for drag and drop feature
isDragging	boolean	For listening is file is dragging on dropzone
onFileUpload	() => void	Called when an element is clicks and triggers to open a file dialog
data	Array	Read or Converted data
file	File | null	Selected file
error	string	Validation error

Stay in touch

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