Xlork NPM | npm.io

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'

Usage

<XLorkClient
  licenseKey='805d720b-d78a-4936-ab4f-ca7999cccd4c'
  user={{
    id: 'xxx',
    email: 'xxx@gmail.com',
    name: 'name'
  }}
  settings={{
    title: 'Stops',
    description: 'Stops',
    allowInvalidSubmit: true,
    allowCustom: false,
    columns: [
      {
        label: 'Notes',
        key: 'notes',
        type: 'list',
        description: 'only list values are acceptable',
        options: [
          { value: 'bad', label: 'Bad' },
          {
            value: 'good',
            label: 'Good',
            alternates: ['great', 'wonderful']
          }
        ]
      },

      {
        label: 'Customer Mobile',
        key: 'customer_mobile_number',
        validators: [
          {
            type: 'regex_matches',
            regex: '^[0-9]{10}$',
            error: '10 digit'
          }
        ]
      },
      {
        label: 'Customer Name',
        key: 'customer_name',
        validators: [
          {
            type: 'required',
            error: 'Name can not be blank'
          }
        ]
      },
      {
        label: 'Date',
        key: 'date',
        type: 'date',
        validators: [
          {
            format: 'YYYY-MM-DD',
            error: 'date field'
          }
        ]
      },
      {
        label: 'Email',
        key: 'email',
        type: 'email'
      }
    ],
    // theme: 'SUNFLOWER', //GRAPFRUIT,FLATRED,FLATORANGE, AQUA, MINT, LIME,FLATMINT,BLUEJEANS,SKYBLUE, GRASS, SUNFLOWER, BITTERSWEET,PINKROSE,LIGHTPINK, DARKGRAY,FLATGRAY
    maxRecords: 2000,
    sampleUrl:
      'https://xlark-project-test.s3.ap-south-1.amazonaws.com/fleet_owner%20%282%29.csv'
  }}
  onComplete={async (response) => {
    console.log(response)
  }}
  onCancel={() => {
    console.log('onCancel - ----')
  }}
  loadOnDemand={(init) => {
    return (
      <button className='btn btn-primary extra_margin' onClick={init}>
        Upload Stops via XL File
      </button>
    )
  }}
/>

Try our example in CodeSandbox.