ra-enterprise
Preconfigured components replacing the default react-admin ones to quickly integrate the Enterprise Edition modules.
Test it live on the Enterprise Edition Storybook and in the e-commerce demo.
ra-enterprise
exports the following "augmented" components: <Admin>
, <Layout>
, <AppBar>
, <Menu>
, <Create>
, and <Edit>
. Use them instead of the react-admin versions to get additional features:
- import { Admin } from 'react-admin';
+ import { Admin } from '@react-admin/ra-enterprise';
const App = () => (
<Admin dataProvider={dataProvider}>
{ /** Put your resources here */ }
</Admin>
);
Installation
npm install --save @react-admin/ra-enterprise
# or
yarn add @react-admin/ra-enterprise
Tip: ra-enterprise
is part of the React-Admin Enterprise Edition, and hosted in a private npm registry. You need to subscribe to one of the Enterprise Edition plans to access this package.
<Admin>
Ra-enterprise exports a replacement for the <Admin>
component, which pre-configures many of the ra-enterprise modules. It comes with:
- A breadcrumb based on resources (from ra-navigation)
- A light and dark mode for the theme (from ra-preferences)
- A language switcher (from ra-preferences)
- A preference based sidebar state (from ra-preferences)
- Augmented reducers for tree structures and realtime locks (from ra-tree and ra-realtime)
- A compact menu with submenus in sliding panels (from ra-navigation)
- The Tour context, allowing to show guided tours everywhere in the admin (from ra-tour)
- English messages including the additional messages required by ra-realtime, ra-relationships, and ra-tree
This modifies the look and feel of react-admin:
To be compared with the default look and feel:
Properties
The alternative <Admin>
accepts the same properties as the default one. Please read the documentation about the react-admin <Admin>
to discover all the properties available.
In addition, you can pass the following properties to customize the ra-enterprise features:
Prop | Required | Type | Default | Description |
---|---|---|---|---|
customReducers |
Optional | object |
- | Augment the data provider with your own reducers |
i18nProvider |
Optional | object |
- | Replace the ra-enterprise i18nProvider |
lightTheme |
Optional | object |
- | Override the light mode with your own light theme |
darkTheme |
Optional | object |
- | Override the dark mode with your own dark theme |
Examples
- Basic usage
import { Admin } from '@react-admin/ra-enterprise';
const dataProvider = {
// Connect to your API
};
const App = () => (
<Admin dataProvider={dataProvider}>{/** Put your resources here */}</Admin>
);
import { Admin } from "@react-admin/ra-enterprise";
const dataProvider = {
// Connect to your API
};
const App = () => <Admin dataProvider={dataProvider}>{/** Put your resources here */}</Admin>;
- Override the dark theme
import { Admin } from '@react-admin/ra-enterprise';
const darkTheme = {
palette: {
type: 'dark', // Don't forget to specify the palette type
primary: {
main: '#90caf9',
},
secondary: {
main: '#ffff00',
},
},
};
const dataProvider = {
// Connect to your API
};
const App = () => (
<Admin dataProvider={dataProvider} darkTheme={darkTheme}>
{/** Put your resources here */}
</Admin>
);
import { Admin } from "@react-admin/ra-enterprise";
const darkTheme = {
palette: {
type: "dark", // Don't forget to specify the palette type
primary: {
main: "#90caf9",
},
secondary: {
main: "#ffff00",
},
},
};
const dataProvider = {
// Connect to your API
};
const App = () => (
<Admin dataProvider={dataProvider} darkTheme={darkTheme}>
{/** Put your resources here */}
</Admin>
);
- Pass your own translations
import { Admin, buildI18nProvider } from '@react-admin/ra-enterprise';
const messages = {
en: {
// Put your english translations here
},
fr: {
// Put your french translations here
},
};
const dataProvider = {
// Connect to your API
};
const i18nProvider = buildI18nProvider(messages);
const App = () => (
<Admin dataProvider={dataProvider} i18nProvider={i18nProvider}>
{/** Put your resources here */}
</Admin>
);
import { Admin, buildI18nProvider } from "@react-admin/ra-enterprise";
const messages = {
en: {
// Put your english translations here
},
fr: {
// Put your french translations here
},
};
const dataProvider = {
// Connect to your API
};
const i18nProvider = buildI18nProvider(messages);
const App = () => (
<Admin dataProvider={dataProvider} i18nProvider={i18nProvider}>
{/** Put your resources here */}
</Admin>
);
- Add a new language (Spanish for example)
import { Admin, buildI18nProvider } from '@react-admin/ra-enterprise';
import spanishMessages from '@blackbox-vision/ra-language-spanish';
const messages = {
en: {
// Put your english translations here
},
fr: {
// Put your french translations here
},
es: {
...spanishMessages,
'ra-relationships': {
duallistinput: {
availableItems: 'Elementos disponibles',
selectedItems: 'Elementos seleccionados',
},
},
// Configure the other modules here
},
};
const i18nProvider = buildI18nProvider(messages, 'es');
import { buildI18nProvider } from "@react-admin/ra-enterprise";
import spanishMessages from "@blackbox-vision/ra-language-spanish";
const messages = {
en: {
// Put your english translations here
},
fr: {
// Put your french translations here
},
es: {
...spanishMessages,
"ra-relationships": {
duallistinput: {
availableItems: "Elementos disponibles",
selectedItems: "Elementos seleccionados",
},
},
// Configure the other modules here
},
};
const i18nProvider = buildI18nProvider(messages, "es");
<Layout>
Alternative to <Layout>
, that should be passed to the <Admin>
.
What is pre-configured?
- A light and dark mode for the theme (from ra-preferences)
- A language switcher (from ra-preferences)
- A preference based sidebar state (from ra-preferences)
- A compact menu with submenus in sliding panels (from ra-navigation)
Default Properties
The alternative <Layout>
accepts the same properties as the default one. Please read the documentation about react-admin <Layout>
to discover all the available properties.
Examples
- Change the
appBar
import { Admin, AppBar, Layout } from '@react-admin/ra-enterprise';
const CustomAppBar = props => <AppBar {...props} />;
const CustomLayout = props => <Layout appBar={CustomAppBar} {...props} />;
const dataProvider = {
// Connect to your API
};
const App = () => (
<Admin dataProvider={dataProvider} layout={CustomLayout}>
{/** Put your resources here */}
</Admin>
);
import { Admin, AppBar, Layout } from "@react-admin/ra-enterprise";
const CustomAppBar = (props) => <AppBar {...props} />;
const CustomLayout = (props) => <Layout appBar={CustomAppBar} {...props} />;
const dataProvider = {
// Connect to your API
};
const App = () => (
<Admin dataProvider={dataProvider} layout={CustomLayout}>
{/** Put your resources here */}
</Admin>
);
- Change the
sidebar
import { Admin, Layout, Sidebar } from '@react-admin/ra-enterprise';
const CustomSidebar = props => <Sidebar {...props} />;
const CustomLayout = props => <Layout sidebar={CustomSidebar} {...props} />;
const dataProvider = {
// Connect to your API
};
const App = () => (
<Admin dataProvider={dataProvider} layout={CustomLayout}>
{/** Put your resources here */}
</Admin>
);
import { Admin, Layout, Sidebar } from "@react-admin/ra-enterprise";
const CustomSidebar = (props) => <Sidebar {...props} />;
const CustomLayout = (props) => <Layout sidebar={CustomSidebar} {...props} />;
const dataProvider = {
// Connect to your API
};
const App = () => (
<Admin dataProvider={dataProvider} layout={CustomLayout}>
{/** Put your resources here */}
</Admin>
);
- Change the
menu
import { Admin, Layout, Menu } from '@react-admin/ra-enterprise';
const CustomMenu = props => <Menu {...props} />;
const CustomLayout = props => <Layout menu={CustomMenu} {...props} />;
const dataProvider = {
// Connect to your API
};
const App = () => (
<Admin dataProvider={dataProvider} layout={CustomLayout}>
{/** Put your resources here */}
</Admin>
);
import { Admin, Layout, Menu } from "@react-admin/ra-enterprise";
const CustomMenu = (props) => <Menu {...props} />;
const CustomLayout = (props) => <Layout menu={CustomMenu} {...props} />;
const dataProvider = {
// Connect to your API
};
const App = () => (
<Admin dataProvider={dataProvider} layout={CustomLayout}>
{/** Put your resources here */}
</Admin>
);
<AppBar>
Alternative to <AppBar>
that should be passed to the <Layout>
.
What is pre-configured?
- A light and dark mode for the theme (from ra-preferences)
- A language switcher (from ra-preferences)
Default Properties
Please read the documentation about the react-admin <AppBar>
to discover all the properties available.
In addition, you can pass the following properties to customize the ra-enterprise features:
Prop | Required | Type | Default | Description |
---|---|---|---|---|
languages |
Optional | Array |
- | A list of languages |
languages[] |
- | object |
- | A object describing the language |
languages[].locale |
- | string |
- | The locale. It should match the locales passed to the i18nProvider . |
languages[].name |
- | string |
- | The language name |
defaultLanguage |
Optional | string |
- languages[0] |
The default language name. It should correspond to one of the passed languages name. |
Examples
- Enable the theme switcher for light and dark mode
// Nothing to do, the <AppBar> is used in the default <Admin>
// and the theme switcher is enabled by default
import { Admin } from '@react-admin/ra-enterprise';
const dataProvider = {
// Connect to your API
};
const App = () => <Admin dataProvider={dataProvider}></Admin>;
// Nothing to do, the <AppBar> is used in the default <Admin>
// and the theme switcher is enabled by default
import { Admin } from "@react-admin/ra-enterprise";
const dataProvider = {
// Connect to your API
};
const App = () => <Admin dataProvider={dataProvider}></Admin>;
- Enable the languages switcher
import { Admin, AppBar, Layout } from '@react-admin/ra-enterprise';
const languages = [
{ locale: 'en', name: 'English 🇬🇧' },
{ locale: 'fr', name: 'Français 🇫🇷' },
];
const CustomAppBar = props => <AppBar languages={languages} {...props} />;
const CustomLayout = props => <Layout appBar={CustomAppBar} {...props} />;
const dataProvider = {
// Connect to your API
};
const App = () => (
<Admin dataProvider={dataProvider} layout={CustomLayout}>
{/** Put your resources here */}
</Admin>
);
import { Admin, AppBar, Layout } from "@react-admin/ra-enterprise";
const languages = [
{ locale: "en", name: "English 🇬🇧" },
{ locale: "fr", name: "Français 🇫🇷" },
];
const CustomAppBar = (props) => <AppBar languages={languages} {...props} />;
const CustomLayout = (props) => <Layout appBar={CustomAppBar} {...props} />;
const dataProvider = {
// Connect to your API
};
const App = () => (
<Admin dataProvider={dataProvider} layout={CustomLayout}>
{/** Put your resources here */}
</Admin>
);
<Breadcrumb>
A <Breadcrumb>
to include in your custom routes. It pre-configures some ra-enterprise
modules.
What is pre-configured?
- A breadcrumb based on the resources (from @react-admin/ra-navigation)
<Create>
, <Edit>
, <List>
and <Show>
views
<Create>
, <Edit>
, <List>
and <Show>
views are all configured with a default actions toolbar which includes a <Breadcrumb variant="actions">
.
The breadcrumb is customizable by passing your own action as usual in react-admin. ra-enterprise
export its own version of CreateActions
, EditActions
, ShowActions
and <ListActions>
which all accept a breadcrumb
prop:
// in ./src/MyBreadcrumb.js
import { Breadcrumb, BreadcrumbItem } from '@react-admin/ra-navigation';
export const MyBreadcrumb = props => (
<Breadcrumb {...props}>
<BreadcrumbItem name="dashboard" label="My Home">
<ResourceBreadcrumbItems resources={['songs', 'artists']} />
</BreadcrumbItem>
</Breadcrumb>
);
// in ./src/ArtistList.js
import { Datagrid, TextField } from 'react-admin';
import { List, ListActions } from '@react-admin/ra-enterprise';
import { MyBreadcrumb } from './MyBreadcrumb';
const ArtistListActions = props => (
<ListActions {...props} breadcrumb={<MyBreadcrumb variant="actions" />} />
);
const ArtistList = props => (
<List
{...props}
sort={{ field: 'id', order: 'DESC' }}
actions={<ArtistListActions />}
>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="firstname" />
<TextField source="name" />
</Datagrid>
</List>
);
// in ./src/MyBreadcrumb.js
import { Breadcrumb, BreadcrumbItem } from "@react-admin/ra-navigation";
export const MyBreadcrumb = (props) => (
<Breadcrumb {...props}>
<BreadcrumbItem name="dashboard" label="My Home">
<ResourceBreadcrumbItems resources={["songs", "artists"]} />
</BreadcrumbItem>
</Breadcrumb>
);
// in ./src/ArtistList.js
import { Datagrid, TextField } from "react-admin";
import { List, ListActions } from "@react-admin/ra-enterprise";
import { MyBreadcrumb } from "./MyBreadcrumb";
const ArtistListActions = (props) => <ListActions {...props} breadcrumb={<MyBreadcrumb variant="actions" />} />;
const ArtistList = (props) => (
<List {...props} sort={{ field: "id", order: "DESC" }} actions={<ArtistListActions />}>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="firstname" />
<TextField source="name" />
</Datagrid>
</List>
);
Both <Create>
and <Edit>
wrap their children with a <ManyToManyReferenceContextProvider>
component to ease usage of
the <ReferenceManyToManyInput>
.
<Filter>
@react-admin/ra-enterprise
also provides a customized version of the default <Filter>
, which ensures that the filter form does not take space when there are no filters applied.
// in ./src/ArtistList.js
import { Datagrid, TextField } from 'react-admin';
import { List, ListActions, Filter } from '@react-admin/ra-enterprise';
const ArtistListFilter = props => <Filter {...props}></Filter>;
const ArtistList = props => (
<List
{...props}
sort={{ field: 'id', order: 'DESC' }}
actions={<ArtistListActions />}
>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="firstname" />
<TextField source="name" />
</Datagrid>
</List>
);
// in ./src/ArtistList.js
import { Datagrid, TextField } from "react-admin";
import { List, Filter } from "@react-admin/ra-enterprise";
const ArtistListFilter = (props) => <Filter {...props}></Filter>;
const ArtistList = (props) => (
<List {...props} sort={{ field: "id", order: "DESC" }} actions={<ArtistListActions />}>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="firstname" />
<TextField source="name" />
</Datagrid>
</List>
);
CHANGELOG
v4.2.1
2021-08-03
- (fix) Merge user provided themes with the default ones.
v4.2.0
2021-07-21
-
(feat) Introduce a customized version of react-admin
<Filter>
component which fixes the issue where too much space was taken by an empty filter form. To use it, you must update your imports:- import { Filter } from 'react-admin'; + import { Filter } from '@react-admin/ra-enterprise';
v4.1.5
2021-07-21
- (fix) Fix build by upgrading it to 3.17.0
v4.1.4
2021-06-29
- (fix) Fix imports from react-admin by upgrading it to 3.16.6
- (fix) Export all prop interfaces
v4.1.3
2021-06-29
- (fix) Update peer dependencies ranges (support react 17)
v4.1.2
2021-04-22
- (fix) Avoid spreading react-admin props on html elements
v4.1.1
2021-04-29
- (fix) Setup translations for all existing modules.
v4.1.0
2021-04-08
- (feat) Automatically setup the breadcrumb correctly when a dashboard has been specified.
v4.0.0
2021-04-01
Breaking change
- (feat) Remove
<BreadcrumbForActions>
in favor of<Breadcrumb variant="actions">
v3.2.0
2021-03-23
- (feat) Provide Custom RealTimeList With Breadcrumb
- (fix) Fix and Simplify Props Interfaces
- (fix) Ensure Breadcrumb is Well Integrated in Views
v3.1.0
2021-03-19
- (feat) Allow to customize breadcrumb in views and actions
v3.0.0
2021-02-19
BREAKING CHANGE
Layout
does not accept abreadcrumb
prop and does not include a defaultBreadcrumb
anymore.
Instead we recommend to includes the Breacrumb inside the views directly. This was motivated by the fact that the breadcrumb was taking too much space above the views. In order to keep the breadcrumb in the default react-admin views, we recommend using the alternative versions provided by this package. See below.
- (feat) Add preconfigured
Show
andList
which includes a Breacrumb in their actions toolbar. - (feat) Update
Create
andEdit
to includes a Breacrumb in their actions toolbar. - (feat) Provide
CreateActions
,EditAction
,ListActions
andShowActions
which includes a Breacrumb.
v2.0.1
2021-02-16
- (fix) Remove dependency to ra-language-french
v2.0.0
2020-11-19
- Upgrade ra-relationships to
2.0.0
- Provide
<Create>
and<Edit>
components which wraps their children with a<ManyToManyReferenceContextProvider>
v1.1.0
2021-01-08
- Update to react-admin 3.11
v1.0.5
2020-12-10
- (fix) Fix custom menu cannot be collapsed by upgrading react-admin
v1.0.4
2020-12-04
- Clarify documentation about exported components
v1.0.3
2020-11-18
- Upgrade to react-admin
3.10
v1.0.2
2020-11-04
- (fix) Fix default messages export
v1.0.1
2020-10-31
- (fix) Fix theme switcher works on some elements only
v1.0.0
2020-10-14
- First release ✨
- (deps) Add
@react-admin/ra-search
to dependencies
v0.1.2
2020-10-13
- (fix) Fix the Messages type
- (deps) Upgrade react-admin to v3.9.3
v0.1.1
2020-10-08
- (feat) Enable
<MultiLevelMenu>
by default
v0.1.0
2020-10-05
- (deps) Upgrade to react-admin v3.9.0
v0.0.5
2020-10-01
- (fix) Remove the create button in the list view of the
Admin
andLayout
stories - (deps) Upgrade
@react-admin/ra-tree
tov1.2.6
to fix issues with custom reducers
v0.0.4
2020-09-29
- (fix) Dashboard is not detected
v0.0.3
2020-09-25
- (fix) Fix an error that makes the theme unchangeable
- (fix) Fix the background color of the default dark
theme
v0.0.2
2020-09-24
- (fix) Fix TypeScript types for the
theme
- (fix) Allow passing an empty theme to the
<Admin>
- (deps) Add
@react-admin/ra-form-layout
to dependencies
v0.0.1
2020-09-18
- (feat) Add a pre-configured
<Admin>
component - (feat) Add pre-configured layout components (
<Layout>
,<AppBar>
,<Breadcrumb>
,<Sidebar>
) - (feat) Add
i18nProvider
methods - (feat) Add
theme
methods