LoginSignup
11
14

More than 5 years have passed since last update.

react-admin スニペット集

Last updated at Posted at 2019-03-28

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

11
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
14