https://github.com/vtex/react-csv-parse

Import data from a csv file to your app and your api.
https://github.com/vtex/react-csv-parse

srv-customer-credit xp-financial

Last synced: about 1 month ago
JSON representation

Import data from a csv file to your app and your api.

• Host: GitHub
• URL: https://github.com/vtex/react-csv-parse
• Owner: vtex
• License: mit
• Created: 2017-09-12T18:50:41.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-12T00:06:36.000Z (about 6 years ago)
• Last Synced: 2024-04-14T11:57:28.905Z (9 months ago)
• Topics: srv-customer-credit, xp-financial
• Language: JavaScript
• Size: 163 KB
• Stars: 42
• Watchers: 150
• Forks: 20
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Csv Parse

Goal: Parse content of a csv file.

## Example

From:

```

Account,Balance,Document,Document Type,Limit,Description,Email

acc1,0,3i563784658,cpf,2000,,[email protected]

acc2,10,3468723468,cpf,10000,Some text,[email protected]

```

To:

```

[

  {

    account: "acc1",

    balance: "0",

    document: "3i563784658",

    documentType: "cpf",

    limit: "2000",

    description: "",

    email: "[email protected]"

  },

  {

    account: "acc2",

    balance: "10",

    document: "3468723468",

    documentType: "cpf",

    limit: "10000",

    description: "Some text",

    email: "[email protected]"

  }

]

```

Given the following keys:

```

const keys = [

  'account',

  'balance',

  'document',

  'documentType',

  'limit',

  'description',

  'email'

]

```

Inspiration: [paypal/downshift](https://github.com/paypal/downshift)

Development structure: [github.com/insin/nwb](https://github.com/insin/nwb)

## Development

| Action         | Command                       |

| -------------- | ----------------------------- |

| Install        | `npm i -g nwb & npm i`        |

| Start          | `npm start`                   |

| Build          | `nwb build`                   |

| Local test     | `npm pack`                    |

| Publish to npm | `npm publish --access public` |

## Usage

```

npm install @vtex/react-csv-parse --save

```

```js

import CsvParse from '@vtex/react-csv-parse'

```

```jsx

handleData = data => {

  this.setState({ data })

}

```

```jsx

render() {

  const keys = [

    "header1",

    "header2",

    "header3",

    "header4",

    "header5",

  ]

  return (

     }

    />

  )

}

```

`CsvParse` is the only component. It doesn't render anything itself, it just

calls the child function and renders that. Wrap everything in

`{/* your function here! */}`.

## Props

| Prop name        | Type  | Default | Required | Description                                                                    |

| ---------------- | ----- | ------- | -------- | ------------------------------------------------------------------------------ |

| `keys`           | array |         | true     | The keys used to create the objects.                                           |

| `onDataUploaded` | func  |         | true     | Callback function with the data parsed as parameter.                           |

| `onError`        | func  |         | false    | Callback function with the following data: `{ err, file, inputElem, reason }`. |

### Data split rules

Based on [Papaparse](https://github.com/mholt/PapaParse).