@xlork/core

xlork

We’ve made it really simple for you to get started with xlork with our new xlorkClient Component. Here’s what you’ll need to know to get started.

React adapter for xlork.com

Installation / Import

First, install the dependency via npm:

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

Usage

<XLorkClient
  licenseKey="XXXX-XXXX-XXXX-XXXX"
  preload={false}
  user={{
    email: '[e-mail]',
    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,
    allowInvalidSubmit: true,
  }}
  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>
    );
  }}
/>

Try our example in CodeSandbox.

Readme

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

License

MIT © [xlork]