React-Admin Export record button

Export a single record as source representation in a downloadable file.

Install

yarn install @dslab/ra-export-record-button

Usage

The ExportRecordButton shoud be placed in a record context to export as a downloadable file the current record. By default it supportes json or yaml as languages, but users can provide a custom Exporter to implement additional representations or introduce custom behavior.

Base usage, for example in a Show view:

import { ExportRecordButton } from '@dslab/ra-export-record-button';

const ShowActions = () => (
    <TopToolbar>
        <ExportRecordButton language="yaml" />
    </TopToolbar>
);

Options

The button accepts all the standard ButtonProps for customization plus options to alter the configuration.

    /**
     * (Optional) language for export. Defaults to `json`
     */
    language?: 'json' | 'yaml';
    /**
     * (Optional) exporter to override the internal one.
     */
    exporter?: Exporter;
    /**
     * (Optional) Custom icon for the button
     */
    icon?: ReactElement;
    /**
     * (Optional) record object to use in place of the context
     */
    record?: RecordType;
    /**
     * (Optional) resource identifier to use in place of the context
     */
    resource?: string;
    /**
     * (Optional) filename to use for export. Defaults to `[resource]-[id]`
     */
    filename?: string;

Using a custom exporter

The user can provide a custom exporter by implementing the standard react-admin interface Exporter. Keep in mind that the default exporter works on lists, so if you use fetchRelatedRecords or other utilities you will have to extract a single record at the end to populate the download's content.

The following examples shows how to collect additional related records and embed their value inside the current record for exporting a fully hydrated representation.

import {
    ExportRecordButton,
    toYaml,
    downloadYaml,
} from '@dslab/ra-export-record-button';

const recordExporter: Exporter = (
    data,
    fetchRelatedRecords,
    dataProvider,
    resource
) => {
    fetchRelatedRecords(data, 'userId', 'users').then(users => {
        const res = data.map(record => ({
            ...record,
            username: users[record.userId].username,
            user: users[record.userId],
        }));

        //single record, list should contain 1 element
        //pick first or exit
        const r = res && res.length > 0 ? res[0] : null;
        if (r) {
            downloadYaml(toYaml(r, resource), `${resource}_${r.id}`);
        }
    });
};

export const PostList = () => (
    <List>
        <Datagrid rowClick="edit">
            <ReferenceField source="userId" reference="users" />
            <TextField source="id" />
            <TextField source="title" />
            <ExportRecordButton exporter={recordExporter} />
        </Datagrid>
    </List>
);

All the utilities for:

• exporting to json or yaml
• downloading a json or yaml string as a file

are exported from the package and available for custom usage.

Author

SmartCommunityLab

• Website: http://www.smartcommunitylab.it/
• Github: @smartcommunitylab

Show your support

Give a ⭐️ if this project helped you!

License

Copyright © 2023 SmartCommunityLab. This project is MIT licensed.