feat: receive custom headers (#156)

coston · web-flow · commit a4c6aace0897 · 2022-11-11T14:02:25.000-06:00
* feat: receive custom headers

* chore: update naming
diff --git a/docs/index.mdx b/docs/index.mdx
@@ -1,20 +1,20 @@
-export { Root } from './root.js'
-import { Head } from 'mdx-go'
-
+export { Root } from "./root.js";
+import { Head } from "mdx-go";
 
 # ⌗ react-json-to-csv
+
 A react button component to easily generate csv downloads of your json data. ✨
 
 [![npm package version](https://badge.fury.io/js/react-json-to-csv.svg)](https://www.npmjs.com/package/react-json-to-csv)&nbsp;
 [![npm downloads](https://img.shields.io/npm/dm/react-json-to-csv)](https://www.npmjs.com/package/react-json-to-csv)&nbsp;
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io)
 
-
 <Head>
   <title>react-json-to-csv</title>
 </Head>
 
 ## Features
+
 - Create a csv download from json data
 - Lightweight
 - Easy to use
@@ -23,24 +23,29 @@ A react button component to easily generate csv downloads of your json data. ✨
 ## Install
 
 Install with npm:
+
 ```sh
 npm i react-json-to-csv
 ```
+
 Or load from a CDN:
+
 ```html
 <script src="https://cdn.jsdelivr.net/npm/react-json-to-csv"></script>
 ```
 
-
 ## Example Usage
+
 Easy, breezy, just add data.
+
 ```.jsx
-  <CsvDownload data={mockData} />
+  <CsvDownloadButton data={mockData} />
 ```
 
 Add a filename or other props.
+
 ```.jsx
-  <CsvDownload 
+  <CsvDownloadButton
     data={mockData}
     filename="good_data.csv"
     style={{ //pass other props, like styles
@@ -59,16 +64,18 @@ Add a filename or other props.
       }}
   >
     Good Data ✨
-  </CsvDownload>
+  </CsvDownloadButton>
 ```
 
 ## Props
 
-| Prop      | Type      | Requirement     | Default | Description                                         |
-| --------- | --------- | ------------ | ------- | --------------------------------------------------- |
-| data     | `object`  | `required` | `null`  | object or array of objects             |
-| filename| `string`  | `optional` | "export.csv"  | The complete filename          |
+| #   | Property  | Type       | Requirement | Default                   | Description                                                                   |
+| --- | --------- | ---------- | ----------- | ------------------------- | ----------------------------------------------------------------------------- |
+| 1   | data      | `[]`       | `required`  |                           | array of objects                                                              |
+| 2   | filename  | `string`   | `optional`  | "export.csv"              | The filename. The `.csv` extention will be edded if not included in file name |
+| 3   | delimiter | `string`   | `optional`  | ";"                       | fields separator                                                              |
+| 4   | headers   | `string[]` | `optional`  | provided data object keys | List of columns that will be used in the final CSV file.                      |
 
 ## Contributing
 
-Please help provide good data faster! Submit any issues and/or make a pull request!
+Please help provide good data faster! Submit any issues and/or make a pull request!
diff --git a/docs/root.js b/docs/root.js
@@ -1,12 +1,12 @@
 // example Root component
 import React from 'react'
 import { StyleProvider } from 'mdx-go'
-import CsvDownload from '../src/index'
+import CsvDownloadButton from '../src/index'
 import mockData from './mockData.js'
 
 
 const components = {
-  CsvDownload,
+  CsvDownloadButton,
   mockData,
 }
 
@@ -35,6 +35,6 @@ export const Root = props =>(
   }}>
     {props.children}
   </div>
-  
+
   </StyleProvider>
 )
diff --git a/readme.md b/readme.md
@@ -1,14 +1,17 @@
 # ⌗ react-json-to-csv
+
 A react button component to easily generate csv downloads of your json data. ✨
 
 [![npm package version](https://badge.fury.io/js/react-json-to-csv.svg)](https://www.npmjs.com/package/react-json-to-csv)&nbsp;
 [![npm downloads](https://img.shields.io/npm/dm/react-json-to-csv.svg)](https://www.npmjs.com/package/react-json-to-csv)&nbsp;
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io)
 
-## Live Demo 
+## Live Demo
+
 [https://react-json-to-csv.coston.io](https://react-json-to-csv.coston.io)
 
 ## Features
+
 - Create a csv download from json data
 - Lightweight
 - Easy to use
@@ -17,31 +20,39 @@ A react button component to easily generate csv downloads of your json data. ✨
 ## Install
 
 Install with npm:
+
 ```sh
 npm i react-json-to-csv
 ```
+
 Or load from a CDN:
+
 ```html
 <script src="https://cdn.jsdelivr.net/npm/react-json-to-csv" />
 ```
 
 ## Example Usage
+
 ```jsx
-import CsvDownload from 'react-json-to-csv'
+import CsvDownloadButton from 'react-json-to-csv'
 ...
 
-<CsvDownload data={mockData} />
+<CsvDownloadButton data={mockData} />
 ```
 
 ## Props
 
-| Prop      | Type      | Requirement     | Default | Description                                         |
-| --------- | --------- | ------------ | ------- | --------------------------------------------------- |
-| data     | `object`  | `required` | `null`  | object or array of objects             |
-| filename| `string`  | `optional` | "export.csv"  | The complete filename          |
+| #   | Property  | Type       | Requirement | Default                   | Description                                                                   |
+| --- | --------- | ---------- | ----------- | ------------------------- | ----------------------------------------------------------------------------- |
+| 1   | data      | `[]`       | `required`  |                           | array of objects                                                              |
+| 2   | filename  | `string`   | `optional`  | "export.csv"              | The filename. The `.csv` extention will be edded if not included in file name |
+| 3   | delimiter | `string`   | `optional`  | ";"                       | fields separator                                                              |
+| 4   | headers   | `string[]` | `optional`  | provided data object keys | List of columns that will be used in the final CSV file.                      |
+
+## Typescript Support
 
-## Typescript Support 
 Install types with npm
+
 ```sh
 npm i --save-dev @types/react-json-to-csv
 ```
diff --git a/src/index.js b/src/index.js
@@ -1,13 +1,16 @@
 import React from 'react'
 import csvDownload from 'json-to-csv-export'
 
-const CsvDownload = (props) => {
-  const { data, filename, delimiter, ...others } = props
+const CsvDownloadButton = (props) => {
+  const { data, filename, delimiter, headers, ...others } = props
 
   return (
-    <button onClick={() => csvDownload({ data, filename, delimiter })} {...others}>
+    <button
+      onClick={() => csvDownload({ data, filename, delimiter, headers })}
+      {...others}
+    >
       {props.children || 'Download Data'}
     </button>
   )
 }
-export default CsvDownload
+export default CsvDownloadButton
diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Render CsvDownload 1`] = `
+exports[`Render CsvDownloadButton 1`] = `
 <button
   onClick={[Function]}
 >
diff --git a/test/index.test.js b/test/index.test.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import CsvDownload from '../src/index'
+import CsvDownloadButton from '../src/index'
 import renderer from 'react-test-renderer';
 
-test('Render CsvDownload', () => {
+test('Render CsvDownloadButton', () => {
   const wrapper = shallow(
-    <CsvDownload
+    <CsvDownloadButton
       data={mockData}
     />
   )

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`// Jest Snapshot v1, https://goo.gl/fbAQLP`
`2`	`2`
`3`		-exports[`Render CsvDownload 1`] = `
	`3`	+exports[`Render CsvDownloadButton 1`] = `
`4`	`4`	`<button`
`5`	`5`	`onClick={[Function]}`
`6`	`6`	`>`