CsvImport

Upload a CSV, match its columns, fix bad rows, and import.

SourcePackage @kerf-js/veneer

Preview

tsx

import { CsvImport } from '@kerf-js/veneer'import type { Role } from '@kerf-js/veneer'export function Team() {  const run = async (    _: Record<string, string>[],    progress: (percent: number) => void,  ) => {    for (const percent of [20, 45, 70, 100]) {      await wait(350)      progress(percent)    }  }  return (    <CsvImport      targets={IMPORT_TARGETS}      sample={IMPORT_SAMPLE}      onImport={run}    />  )}const IMPORT_TARGETS = [  { id: 'name', label: 'Full name', aliases: ['name'] },  {    id: 'email',    label: 'Email',    required: true,    check: (v: string) =>      /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)        ? undefined        : 'Not a valid email',  },  { id: 'team', label: 'Team' },  {    id: 'role',    label: 'Role',    check: (v: string) =>      /^(admin|member|viewer)$/i.test(v)        ? undefined        : 'Use admin, member or viewer',  },]const IMPORT_SAMPLE = {  name: 'kerf-team.csv',  text:    'Name,Email,Team,Role\nDara ' +    'Nowak,dara@kerf.dev,Web,' +    'member\nKai Sorensen,kai@kerf,' +    'Data,member\nAmir Saleh,' +    'amir@kerf.dev,Mobile,owner\n' +    'Rosa Delgado,rosa@kerf.dev,' +    'Platform,admin\n',}const wait = (ms: number) =>  new Promise<void>((done) => {    setTimeout(done, ms)  })

Installation

npm install @kerf-js/veneer

Usage

tsx

import { CsvImport } from '@kerf-js/veneer'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`targets`	`ImportTarget[]`	—	The fields to fill, with aliases and checks.
`noun`	`[one: string, many: string]`	—	What a row is, singular and plural.
`rowLimit`	`number`	—	The most rows it accepts.
`sample`	`{ name: string; text: string; }`	—	Offers a sample file.

Event	Type	Default	Description
`onImport`	`(records: Record<string, string>[], progress: (percent: number) => void)…`	—	Runs the import and reports progress from 0 to 100.

RelatedMembers table