https://github.com/christiaanwesterbeek/ra-extensions
Community powered extensions for the frontend framework of react-admin 💪
https://github.com/christiaanwesterbeek/ra-extensions
extensions react-admin reactjs
Last synced: 8 months ago
JSON representation
Community powered extensions for the frontend framework of react-admin 💪
- Host: GitHub
- URL: https://github.com/christiaanwesterbeek/ra-extensions
- Owner: christiaanwesterbeek
- Created: 2019-11-02T20:27:52.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-12T17:06:38.000Z (over 4 years ago)
- Last Synced: 2025-09-05T01:52:04.100Z (10 months ago)
- Topics: extensions, react-admin, reactjs
- Language: JavaScript
- Homepage:
- Size: 206 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# react-admin extensions
Let's start of by saying that [react-admin](https://github.com/marmelab/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](https://github.com/christiaanwesterbeek/ra-extensions/issues/new) 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](https://marmelab.com/react-admin/Ecosystem.html) 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
```javascript
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 }) => (
);
BulkActionButtons.propTypes = {
resource: PropTypes.string,
selectedIds: PropTypes.array,
};
const SomeList = props => (
}
exporter={exporter}
>
);
export default SomeList;
```
### Translation
Add the extra translations that some components may require.
```javascript
// 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 = () => (
...
);
```