{"id":21334903,"url":"https://github.com/vlsergey/react-bootstrap-csv-export","last_synced_at":"2025-03-16T01:42:03.193Z","repository":{"id":57169229,"uuid":"383928069","full_name":"vlsergey/react-bootstrap-csv-export","owner":"vlsergey","description":"Ready to use CSV exporter components with settings form and progress indicator","archived":false,"fork":false,"pushed_at":"2021-08-13T09:20:54.000Z","size":2046,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-26T07:38:06.191Z","etag":null,"topics":["csv","export","react-bootstrap"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vlsergey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-07T21:25:29.000Z","updated_at":"2022-01-12T14:12:43.000Z","dependencies_parsed_at":"2022-09-13T19:31:10.587Z","dependency_job_id":null,"html_url":"https://github.com/vlsergey/react-bootstrap-csv-export","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlsergey%2Freact-bootstrap-csv-export","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlsergey%2Freact-bootstrap-csv-export/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlsergey%2Freact-bootstrap-csv-export/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlsergey%2Freact-bootstrap-csv-export/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vlsergey","download_url":"https://codeload.github.com/vlsergey/react-bootstrap-csv-export/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814854,"owners_count":20352037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["csv","export","react-bootstrap"],"created_at":"2024-11-21T23:36:08.905Z","updated_at":"2025-03-16T01:42:03.174Z","avatar_url":"https://github.com/vlsergey.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @vlsergey/react-bootstrap-csv-export\n[![NPM version][npm-image]][npm-url]\n[![CI Status][ci-image]][ci-url]\n[![Downloads][downloads-image]][downloads-url]\n\nReady-to-use components to export data as CSV. Provides not only core TypeScript functions, but also react-bootstrap form components that can be directly used in application.\n\nMain features:\n* [x] Generated CSV is downloaded to user browser with [streamsaver](https://github.com/jimmywarting/StreamSaver.js) library\n* [x] Supports async fetching with pagination\n* [x] Indicates export progress\n\n\nOnline demo: [HERE](https://vlsergey.github.io/react-bootstrap-csv-export/)\n\n## Installation:\n```\nnpm install --save @vlsergey/react-bootstrap-csv-export\n```\nor\n```\nnpm install --save-dev @vlsergey/react-bootstrap-csv-export\n```\n\n## Usage as part of the page\nTo include export-to-csv form to modal window or distinct page:\n\n```jsx\nimport Container from 'react-bootstrap/Container';\nimport {ExportToCsvForm, Page} from '@vlsergey/react-bootstrap-csv-export';\n\nasync function fetchPageImpl( page: number ) : Promise\u003cPage\u003cMyType\u003e\u003e {\n  /* define how to fetch page of MyType */\n  return {\n    content: /*...*/ as MyType[],\n    number: page,\n    totalElements: /*...*/,\n    totalPages: /*...*/,\n  };\n}\nconst fields = [{key: 'id'}, {key: 'name'}, {key: 'birthday'},];\n\n/* ... */\n\nexport default function Demo (): JSX.Element {\n\n  return \u003cContainer\u003e\n    \u003cExportToCsvForm\n      fetchPage={fetchPageImpl}\n      fields={fields}\n      fileName=\"test.csv\" /\u003e\n  \u003c/Container\u003e;\n}\n```\n\n## Usage as modal\nTo use out-of-the-box export-to-csv modal form:\n\n```jsx\nimport React, {useCallback, useState} from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Container from 'react-bootstrap/Container';\n\nimport {ExportToCsvModal} from '@vlsergey/react-bootstrap-csv-export';\n\n/* ... */\n\nasync function fetchPageImpl( page: number ) : Promise\u003cPage\u003cMyType\u003e\u003e {\n  /* define how to fetch page of MyType */\n  return {\n    content: /*...*/ as MyType[],\n    number: page,\n    totalElements: /*...*/,\n    totalPages: /*...*/,\n  };\n}\n\nconst fields = [{key: 'id'}, {key: 'name'}, {key: 'birthday'},];\n\nexport default function FormDemo (): JSX.Element {\n\n  const [ show, setShow ] = useState\u003cboolean\u003e(false);\n  const handleShow = useCallback(() =\u003e setShow(true), [ setShow ]);\n  const handleHide = useCallback(() =\u003e setShow(false), [ setShow ]);\n\n  return \u003cContainer\u003e\n    \u003cExportToCsvModal\n      fetchPage={fetchPageImpl}\n      fields={fields}\n      fileName=\"test.csv\"\n      onHide={handleHide}\n      show={show} /\u003e\n    \u003cButton onClick={handleShow}\u003eExport to CSV\u003c/Button\u003e\n  \u003c/Container\u003e;\n}\n\n```\n\n\n[npm-image]: https://img.shields.io/npm/v/@vlsergey/react-bootstrap-csv-export.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/@vlsergey/react-bootstrap-csv-export\n[ci-image]: https://github.com/vlsergey/react-bootstrap-csv-export/actions/workflows/node.js.yml/badge.svg?branch=master\n[ci-url]: https://github.com/vlsergey/react-bootstrap-csv-export/actions/workflows/node.js.yml\n[downloads-image]: http://img.shields.io/npm/dm/@vlsergey/react-bootstrap-csv-export.svg?style=flat-square\n[downloads-url]: https://npmjs.org/package/@vlsergey/react-bootstrap-csv-export\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvlsergey%2Freact-bootstrap-csv-export","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvlsergey%2Freact-bootstrap-csv-export","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvlsergey%2Freact-bootstrap-csv-export/lists"}