Skip to main content

<Settings>

Declares Admin-level defaults for your application. Pass it as the settings prop on <Admin> to override the framework's built-in defaults for all resources.

import { Admin, ResourceSchema, Settings } from '@strato-admin/admin';
import { MyTable } from './MyTable';

export default function App() {
  return (
    <Admin
      dataProvider={dataProvider}
      settings={<Settings listComponent={MyTable} deleteSuccessMessage="Product deleted" />}
    >
      <ResourceSchema name="products">...</ResourceSchema>
    </Admin>
  );
}

Props​

PropTypeDefaultDescription
listComponentComponentType<Table>Default list/table component used for all resources that don't specify their own.
detailComponentComponentType<DetailHub>Default detail component used for all resources that don't specify their own.
deleteSuccessMessagestring | ReactNode"Element deleted"Notification shown after a single record is deleted.
bulkDeleteSuccessMessagestring | ReactNode | ((count: number) => ReactNode)"{count} elements deleted"Notification shown after a bulk delete. Pass a function to access the deleted item count.

listComponent​

Overrides the default table/list component for every resource in the app. The per-resource listComponent prop on <ResourceSchema> takes precedence over this value.

import { Cards } from '@strato-admin/admin';

<Admin settings={<Settings listComponent={Cards} />}>...</Admin>;

detailComponent​

Overrides the default detail view component for every resource. Rarely needed — most customization is done per-resource via <ResourceSchema>.

deleteSuccessMessage​

Sets the notification message shown after a single record is deleted via <DeleteButton>. Accepts a plain string, a translated string key, or a ReactNode (e.g. a <Message> component for ICU formatting).

// Plain string
<Settings deleteSuccessMessage="Product removed" />;

// ICU via <Message> (extracted and translated automatically)
import { Message } from '@strato-admin/admin';
<Settings deleteSuccessMessage={<Message>Product removed</Message>} />;

The full resolution order for the delete success message is:

  1. successMessage prop on <DeleteButton>
  2. deleteSuccessMessage option on <ResourceSchema>
  3. deleteSuccessMessage on <Settings> ← this prop
  4. Framework default: "Element deleted"

bulkDeleteSuccessMessage​

Sets the notification message shown after a bulk delete via <BulkDeleteButton>. Because the message often includes the number of deleted items, this prop also accepts a function that receives the count and returns a ReactNode.

// Static string
<Settings bulkDeleteSuccessMessage="Products deleted" />

// Function with count
<Settings
  bulkDeleteSuccessMessage={(count) =>
    count === 1 ? 'One product deleted' : `${count} products deleted`
  }
/>

// ICU plural via <Message>
import { Message } from '@strato-admin/admin';
<Settings
  bulkDeleteSuccessMessage={(count) => (
    <Message vars={{ smart_count: count }}>
      {'{smart_count, plural, =1 {Product deleted} other {# products deleted}}'}
    </Message>
  )}
/>

The full resolution order mirrors deleteSuccessMessage:

  1. successMessage prop on <BulkDeleteButton>
  2. bulkDeleteSuccessMessage option on <ResourceSchema>
  3. bulkDeleteSuccessMessage on <Settings> ← this prop
  4. Framework default: "{count} elements deleted"

Reading settings in your own components​

Use the useSettings hook to access the current settings values from any component inside <Admin>.

import { useSettings } from '@strato-admin/core';

const MyComponent = () => {
  const { listComponent: ListComponent } = useSettings();
  return <ListComponent />;
};