Wondering what’s next for npm?Check out our public roadmap! »

    react-admin-import-csv

    1.0.19 • Public • Published

    react-admin-import-csv

    NPM Version Downloads/week License Github Issues Build and Publish Code Coverage

    CSV import button for react-admin.

    image

    Usage

    Simply import the button into a toolbar, like so:

    Basic Import Action Only

    import {
      Datagrid,
      List,
      TextField,
      RichTextField,
      TopToolbar,
    } from "react-admin";
    import { ImportButton } from "react-admin-import-csv";
    import { CreateButton } from "ra-ui-materialui";
    
    const ListActions = (props) => {
      const { className, basePath } = props;
      return (
        <TopToolbar className={className}>
          <CreateButton basePath={basePath} />
          <ImportButton {...props} />
        </TopToolbar>
      );
    };
    export const PostList = (props) => (
      <List {...props} filters={<PostFilter />} actions={<ListActions />}>
        <Datagrid>
          <TextField source="title" />
          <RichTextField source="body" />
          ...
        </Datagrid>
      </List>
    );

    Export/Import Actions

    import {
      Datagrid,
      List,
      TextField,
      RichTextField,
      TopToolbar,
    } from "react-admin";
    import { ImportButton } from "react-admin-import-csv";
    import { CreateButton, ExportButton } from "ra-ui-materialui";
    
    const ListActions = (props) => {
      const {
        className,
        basePath,
        total,
        resource,
        currentSort,
        filterValues,
        exporter,
      } = props;
      return (
        <TopToolbar className={className}>
          <CreateButton basePath={basePath} />
          <ExportButton
            disabled={total === 0}
            resource={resource}
            sort={currentSort}
            filter={filterValues}
            exporter={exporter}
          />
          <ImportButton {...props} />
        </TopToolbar>
      );
    };
    export const PostList = (props) => (
      <List {...props} filters={<PostFilter />} actions={<ListActions />}>
        <Datagrid>
          <TextField source="title" />
          <RichTextField source="body" />
          ...
        </Datagrid>
      </List>
    );

    Configuration Options

    // All configuration options are optional
    const config: ImportConfig = {
      // Enable logging
      logging?: boolean;
      // Disable "import new" button
      disableImportNew?: boolean;
      // Disable "import overwrite" button
      disableImportOverwrite?: boolean;
      // A function to translate the CSV rows on import
      preCommitCallback?: (action: "create" | "overwrite", values: any[]) => Promise<any[]>;
      // A function to handle row errors after import
      postCommitCallback?: (error: any) => void;
      // Transform rows before anything is sent to dataprovider
      transformRows?: (csvRows: any[]) => Promise<any[]>;
      // Async function to Validate a row, reject the promise if it's not valid
      validateRow?: (csvRowItem: any) => Promise<void>;
      // Any option from the "papaparse" library
      parseConfig?: {
        // For all options see: https://www.papaparse.com/docs#config
      }
    }
    <ImportButton {...props} {...config}/>

    Handle id fields which might be numbers

    Use the paparse configuration option dynamicTyping

    const importOptions = {
      parseConfig?: {
        // For all options see: https://www.papaparse.com/docs#config
        dynamicTyping: true
      }
    }

    Reducing Requests

    Your dataprovider will need to implement the .createMany() method in order to reduce requests to your backend. If it doesn't exist, it will fallback to calling .create() on all items, as shown below (same goes for .update()):

    Name Special Method Fallback Method
    Creating from CSV .createMany() .create()
    Updating from CSV .updateManyArray() .update()

    Interfaces

    The dataprovider should accept these param interfaces for the bulk create/update methods.

    export interface UpdateManyArrayParams {
      ids: Identifier[];
      data: any[];
    }
    export interface CreateManyParams {
      data: any[];
    }

    Translation i18n

    This package uses react-admin's global i18n translation. Below is an example on how to set it up with this package.

    Current supported languages (submit a PR if you'd like to add a language):

    • English (en)
    • Spanish (es)
    • Chinese (zh)
    • German (de)
    • French (fr)

    Example (i18nProvider)

    import { resolveBrowserLocale, useLocale } from "react-admin";
    import polyglotI18nProvider from "ra-i18n-polyglot";
    import englishMessages from "ra-language-english";
    // This package's translations
    import * as domainMessages from "react-admin-import-csv/lib/i18n";
    
    // Select locale based on react-admin OR browser
    const locale = useLocale() || resolveBrowserLocale();
    // Create messages object
    const messages = {
      // Delete languages you don't need
      en: { ...englishMessages, ...domainMessages.en },
      zh: { ...chineseMessages, ...domainMessages.zh },
      es: { ...spanishMessages, ...domainMessages.es },
    };
    // Create polyglot provider
    const i18nProvider = polyglotI18nProvider(
      (locale) => (messages[locale] ? messages[locale] : messages.en),
      locale
    );
    
    // declare prop in Admin component
    <Admin dataProvider={dataProvider} i18nProvider={i18nProvider}>

    More information on this setup here

    Development

    If you'd like to develop on react-admin-import-csv do the following.

    Local install

    • git clone https://github.com/benwinding/react-admin-import-csv/
    • cd react-admin-import-csv
    • yarn

    Tests

    • yarn test # in root folder

    Run demo

    Open another terminal

    • yarn build-watch

    Open another terminal and goto the demo folder

    • yarn start

    Keywords

    none

    Install

    npm i react-admin-import-csv

    DownloadsWeekly Downloads

    504

    Version

    1.0.19

    License

    MIT

    Unpacked Size

    262 kB

    Total Files

    144

    Last publish

    Collaborators

    • avatar