ra-enterprise

Alternative ready-to-use components for the react-admin enterprise edition.

Use them to replace some the open-source components you are familiar with such as the <Admin> or the <Layout>.

ra-enterprise exports the following components: Admin, Layout, AppBar and Breadcrumb. You must import all the other components as usual from their respective packages.

- import { Admin } from 'react-admin';
+ import { Admin } from '@react-admin/ra-enterprise';

Installation

npm install --save @react-admin/ra-enterprise
# or
yarn add @react-admin/ra-enterprise

<Admin>

Alternative to <Admin>, to be used as the main component of your application. It pre-configures most of the ra-enterprise modules.

What is pre-configured?

• A Breadcrumb based on resources (from @react-admin/ra-navigation)
• A light and dark mode for the theme (from @react-admin/ra-preferences)
• A preference based sidebar state (from @react-admin/ra-preferences)
• The possibility to lock a resource (from @react-admin/ra-realtime)

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

1. Basic usage

import { Admin } from '@react-admin/ra-enterprise';

const dataProvider = {
    // Connect to your API
};

function App(props) {
    return (
        <Admin dataProvider={dataProvider}>
            { /** Put your resources here */ }
        </Admin>
    );
}

2. 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
};

function App(props) {
    return (
        <Admin dataProvider={dataProvider} darkTheme={darkTheme}>
            { /** Put your resources here */ }
        </Admin>
    );
}

3. 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);

function App(props) {
   return (
       <Admin
           dataProvider={dataProvider}
           i18nProvider={i18nProvider}
       >
           // Put your resources here
       </Admin>
   );
}

4. 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');

const dataProvider = {
     // Connect to your API
};

function App(props) {
   return (
       <Admin
           dataProvider={dataProvider}
           i18nProvider={i18nProvider}
       >
           // Put your resources here
       </Admin>
   );
}

<Layout>

Alternative to <Layout>, that should be passed to the <Admin>.

What is pre-configured?

• A breadcrumb on every page based on the resources (from @react-admin/ra-navigation)
• A synchronized sidebar which saves its open/close state in the preferences (from @react-admin/ra-preferences)
• A good looking menu in the sidebar which uses the "category" variant of the <MultiLevelMenu />

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

1. Change the appBar

import {
    Admin,
    AppBar,
    Breadcrumb,
    Layout,
    Sidebar
} from '@react-admin/ra-enterprise';

function CustomAppBar(props) {
    return <AppBar {...props} />;
};

function CustomLayout(props) {
    return (
        <Layout appBar={CustomAppBar} {...props} />
    );
};

const dataProvider = {
    // Connect to your API
};

function App(props) {
    return (
        <Admin
            dataProvider={dataProvider}
            layout={CustomLayout}
        >
            { /** Put your resources here */ }
        </Admin>
    );
 }

2. Change the breadcrumb

import {
    Admin,
    AppBar,
    Breadcrumb,
    Layout,
    Sidebar
} from '@react-admin/ra-enterprise';

function CustomBreadcrumb(props) {
    return (
        <Breadcrumb {...props}>
            { /** Put your custom breadcrumb here */ }
        </Breadcrumb>
    );
};

function CustomLayout(props) {
    return (
        <Layout breadcrumb={CustomBreadcrumb} {...props} />
    );
};

const dataProvider = {
    // Connect to your API
};

function App(props) {
    return (
        <Admin
            dataProvider={dataProvider}
            layout={CustomLayout}
        >
            { /** Put your resources here */ }
        </Admin>
    );
 }

3. Change the sidebar

import {
    Admin,
    AppBar,
    Breadcrumb,
    Layout,
    Sidebar
} from '@react-admin/ra-enterprise';

function CustomSidebar(props) {
    return <Sidebar {...props} />;
};

function CustomLayout(props) {
    return (
        <Layout sidebar={CustomSidebar} {...props} />
    );
};

const dataProvider = {
    // Connect to your API
};

function App(props) {
    return (
        <Admin
            dataProvider={dataProvider}
            layout={CustomLayout}
        >
            { /** Put your resources here */ }
        </Admin>
    );
 }

4. Change the menu

import {
    Admin,
    AppBar,
    Breadcrumb,
    Layout,
    Menu
} from '@react-admin/ra-enterprise';

function CustomMenu(props) {
    return <Menu {...props} />;
};

function CustomLayout(props) {
    return (
        <Layout menu={CustomMenu} {...props} />
    );
};

const dataProvider = {
    // Connect to your API
};

function App(props) {
    return (
        <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 theme button to switch between light and dark mode (from @react-admin/ra-preferences)
• A language button to switch between the locales (from @react-admin/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

1. 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
};

function App(props) {
    return (
        <Admin dataProvider={dataProvider}>
        </Admin>
    );
}

2. Enable the languages switcher

import { Admin, AppBar, Layout } from '@react-admin/ra-enterprise';

const languages = [
    { locale: 'en', name: 'English 🇬🇧' },
    { locale: 'fr', name: 'Français 🇫🇷' },
];

function CustomAppBar(props) {
    return <AppBar languages={languages} {...props} />;
};

function CustomLayout(props) {
    return <Layout appBar={CustomAppBar} {...props} />;
};

const dataProvider = {
    // Connect to your API
};

function App(props) {
    return (
        <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>.