react-admin extensions

Let's start of by saying that react-admin rocks! That means the people building and supporting it are really all-in with this framework. I'm using it for all my clients. Sometimes it happens that a feature or component is requested, but it isn't getting added to react-admin. In those cases it's often said that they won't add and it can be solved in userland. I respect that.

Welcome to userland, but organised! 👨‍💻👩‍💻

This repo is here to provide an additional set of components, hooks, action, etc that are not added (yet) to react-admin itself.

Available extensions

• button
  • BulkExportButton

Right now this is the only component of this repo. You're very welcome to create an issue to request or discuss another. Or you can propose your component or addition in a PR.

Also, many packages have already been published by the community that augment react-admin. Most of them provide one functionality or component. The intention of this repo is to house many (unrelated) components that we as a community can contribute to and use.

Installation

yarn add ra-extensions

Usage

BulkExportButton

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Datagrid, downloadCSV, List, TextField } from 'react-admin';
import { unparse as convertToCSV } from 'papaparse/papaparse.min';
import { BulkExportButton } from 'ra-extensions';

const exporter = data => {
    const csv = convertToCSV({
        data,
        fields: ['id', 'b', 'c'],
    });
    downloadCSV(csv, 'somelist'); // download as 'somelist.csv` file
};

const BulkActionButtons = ({ resource, selectedIds }) => (
    <Fragment>
        <BulkExportButton
            resource={resource}
            selectedIds={selectedIds}
            exporter={exporter}
        />
    </Fragment>
);
BulkActionButtons.propTypes = {
    resource: PropTypes.string,
    selectedIds: PropTypes.array,
};

const SomeList = props => (
    <List
        {...props}
        bulkActionButtons={<BulkActionButtons />}
        exporter={exporter}
    >
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <TextField source="b" />
            <TextField source="c" />
        </Datagrid>
    </List>
);

export default SomeList;

Translation

Add the extra translations that some components may require.

// standard react-admin translations
import englishMessages from 'ra-language-english';
import frenchMessages from 'ra-language-french';

// ra-extensions translations
import { raxMessages } from 'ra-extensions';

// your own translations
import * as domainMessages from './i18n';

const messages = {
    fr: { ...frenchMessages, ...raxMessages.fr, ...domainMessages.fr },
    en: { ...englishMessages, ...raxMessages.en, ...domainMessages.en },
};
const i18nProvider = locale => messages[locale];

const App = () => (
    <Admin i18nProvider={i18nProvider}>
        ...
    </Admin>
);