use-exportable-csv
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

use-exportable-csv npm npm downloads

React hook for downloading csv in convenient way.

  • your json-like data (or 2D array) in converted into csv (with options You provide: delimiter, headers, BOM mask) and on top of this, blob is generated
  • blob is available under object URL, which is returned from hook
  • each time you change your data/options, object URL is updated (old one is unbound from document)
  • link can be used as anchor tag attribute - href

Usage

Check also my blog post how to deal with CSV exports

function Component() {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then((res) => res.json())
      .then(setData)
  }, [])

  const options = { bom: true }
  const csvLink = useExportableCSV(data, options)

  return (
    <div className="xyz">
      (...)
      <a className="link" href={csvLink} download="data.csv">
        CSV download
      </a>
      (...)
    </div>
  )
}

Live Example

API

type CSVDelimiter = ',' | ';'
type Options = Partial<{
  bom: boolean
  delimiter: CSVDelimiter
  headers: string[]
}>
type Value = string | number | bigint | boolean | null
type Content = Value[][] | Record<string, Value | Value[]>[]

useExportableCSV() call

const link: string = useExportableCSV(content: Content, options: Options)

Package Sidebar

Install

npm i use-exportable-csv

Weekly Downloads

189

Version

1.0.2

License

MIT

Unpacked Size

17.3 kB

Total Files

20

Last publish

Collaborators

  • jedluk