react-admin スニペット集

react-adminでたまによく使うパターンのスニペット集

Translations (i18n)

ドキュメント
https://marmelab.com/react-admin/Translation.html

i18n/index.ts

import japaneseMessages from './ja'
import englishMessages from './en'

const messages = {
  ja: japaneseMessages,
  en: englishMessages
}

export default (locale: string) => messages[locale]

i18n/ja.ts

import japaneseMessages from 'ra-language-japanese'

const domainMessages = {
  resources: {
    users: {
      name: 'ユーザー',
      fields: {
        name: '名前',
        createdAt: '登録時刻',
      },
      actions: {
        invalidate: '無効化'
      }
    }
  }
}

export default { ...japaneseMessages, ...domainMessages }

App.ts

import i18nProvider from './i18n'
import { Admin } from 'react-admin'

const App = () => (
    <Admin i18nProvider={i18nProvider}>
        ...
    </Admin>
);

REST API叩くカスタムボタン（ + カスタムi18n）

ドキュメント
https://marmelab.com/react-admin/Actions.html

User/InvalidateButton.tsx

import React, { useCallback } from 'react'
import { compose } from 'recompose'
import {
  showNotification,
  UPDATE,
  withDataProvider,
  translate
} from 'react-admin'

const InvalidateButtonBase = ({
  dataProvider,
  dispatch,
  basePath,
  data,
  resource,
  translate
}) => {
  const handleClick = useCallback(() => {
    const updatedRecord = { ...data, invalidatedAt: new Date() }
    dataProvider(UPDATE, resource, { id: data.id, data: updatedRecord }).then(
      () => {
        dispatch(showNotification('Invalidated'))
        dispatch(push(`${basePath}/${data.id}/show`))
      }
    )
  }, [data])

  return (
    <Button variant="outlined" onClick={handleClick}>
      {translate('resources.users.actions.invalidate')}
    </Button>
  )
}

const InvalidateButton = compose(
  translate,
  withDataProvider
)(InvalidateButtonBase)

ログイン画面のbackground変更

デフォルトだと unsplash.com というサイトの日替わり写真が表示される。
https://github.com/marmelab/react-admin/blob/432d7a26bbfe9424729a9da039a010ec00f2bcca/packages/ra-ui-materialui/src/auth/Login.js#L158

割とセクシー系の画像も表示されるので使いづらい案件が多い。
props.backgroundImageを上書きする。

App.tsx

import { Admin, Login } from 'react-admin'

const CustomLogin = (props: any) => (
  <Login {...props} backgroundImage="/bg.jpg" />
)

const App = () => (
  <Admin
    dataProvider={dataProvider}
    loginPage={CustomLogin}
  >
    ...
  </Admin>
)

日時の表示

デフォルトのDateFieldだと日付のみ＆D/M/YYYYなフォーマットで表示される。
propsのshowTimeとlocalesで変更できる。
デフォで時刻ありのjaフォーマットにしたコンポーネントを用意しておくと便利。

DateField.tsx

import * as React from 'react'
import { DateField } from 'react-admin'

const CustomDateField = ({ ...props }) => {
  return <DateField showTime={true} locales="ja" {...props} />
}
export default CustomDateField

テーマの設定

ドキュメント
https://marmelab.com/react-admin/Theming.html#writing-a-custom-theme