ra-enterprise
Preconfigured components replacing the default react-admin ones to quickly integrate the Enterprise Edition modules.
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>
);
You can test this module in the Enterprise Edition Demo.
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>
);
- 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>
);
- 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>
);
- 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');
<Layout>
Alternative to <Layout>
, that should be passed to the <Admin>
.
What is pre-configured?
- 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)
- 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.
In addition, you can pass the following properties to customize the ra-enterprise features:
Prop | Required | Type | Default | Description |
---|---|---|---|---|
breadcrumb |
Optional | ReactNode |
<Breadcrumb> |
Replace the default <Breadcrumb> |
Examples
- Change the
appBar
import {
Admin,
AppBar,
Breadcrumb,
Layout,
Sidebar
} 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
breadcrumb
import {
Admin,
AppBar,
Breadcrumb,
Layout,
Sidebar
} from '@react-admin/ra-enterprise';
const CustomBreadcrumb = (props) => (
<Breadcrumb {...props}>
{ /** Put your custom breadcrumb here */ }
</Breadcrumb>
);
const CustomLayout = (props) => (
<Layout breadcrumb={CustomBreadcrumb} {...props} />
);
const dataProvider = {
// Connect to your API
};
const App = () => (
<Admin
dataProvider={dataProvider}
layout={CustomLayout}
>
{ /** Put your resources here */ }
</Admin>
);
- Change the
sidebar
import {
Admin,
AppBar,
Breadcrumb,
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,
AppBar,
Breadcrumb,
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>
);
- 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>
);
<Breadcrumb>
A <Breadcrumb>
included in the <Layout>
. It pre-configures some ra-enterprise
modules.
What is pre-configured?
- A breadcrumb based on the resources (from @react-admin/ra-navigation)
<Create>
and <Edit>
Both <Create>
and <Edit>
wrap their children with a <ManyToManyReferenceContextProvider>
component to ease usage of
the <ReferenceManyToManyInput>
.
CHANGELOG
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