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

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)

CHANGELOG

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 and Layout stories
  • (deps) Upgrade @react-admin/ra-tree to v1.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