@xlork/react NPM

xlork

XLork is a powerful Node.js package for parsing and manipulating CSV and XML files. With its intuitive API, XLork makes it easy to read, write, and modify CSV and XML data in your Node.js applications. Whether you're dealing with large datasets or just need to perform some quick data transformations, XLork has you covered. Plus, with its comprehensive documentation and responsive community support, XLork is the perfect choice for developers looking to work with CSV and XML data in Node.js. Install XLork today and start parsing and manipulating your data with ease!

React adapter for xlork.com

Installation / Import

First, install the dependency via npm:

  npm i @xlork/react

Examples

Try our example in CodeSandbox.

Readme

For usage see the guide here - https://xlork.com/docs

Usage

import { XLorkClient } from '@xlork/react';

<XLorkClient
  licenseKey="XXXX-XXXX-XXXX-XXXX"
  preload={false}
  user={{
    email: 'example@xlork.com',
    name: 'xlork-demo',
  }}
  settings={{
    title: 'Upload data',
    columns: [
      {
        label: 'Customer Name',
        key: 'customer_name',
        type: 'text',
        validators: {
          type: 'required',
          regexMatches: '^[0-9]{10}$',
          error: 'Name can not be blank',
        },
      },
      {
        label: 'Customer Mobile',
        key: 'customer_mobile_number',
        type: 'numeric',
        validators: {
          regexMatches: '^[0-9]{10}$',
          error: 'Please input 10 digit no.',
        },
      },
      {
        label: 'Email',
        key: 'email',
        type: 'email',
      },
      {
        label: 'Date',
        key: 'date',
        type: 'date',
        dateFormat: 'DD-MM-YYYY',
      },
    ],
    theme: 'SUNFLOWER',
    maxRecords: 20,
  }}
  onComplete={async (response) => {
    console.log(response);
  }}
  onCancel={() => {
    console.log('onCancel - ----');
  }}
  loadOnDemand={(init) => {
    return (
      <button className="btn btn-primary extra_margin" onClick={init}>
        Upload Data
      </button>
    );
  }}
/>