Text

http://localhost:3000

Live previews only work with the latest documentation.

const { default: routerProvider } = RefineReactRouterV6
const { default: simpleRest } = RefineSimpleRest
setRefineProps({
  routerProvider,
  dataProvider: simpleRest('https://api.fake-rest.refine.dev'),
  notificationProvider: RefineMantine.notificationProvider,
  Layout: RefineMantine.Layout,
  Sider: () => null,
})

const Wrapper = ({ children }) => {
  return (
    <RefineMantine.MantineProvider
      theme={RefineMantine.LightTheme}
      withNormalizeCSS
      withGlobalStyles
    >
      <RefineMantine.Global
        styles={{ body: { WebkitFontSmoothing: 'auto' } }}
      />
      <RefineMantine.NotificationsProvider position="top-right">
        {children}
      </RefineMantine.NotificationsProvider>
    </RefineMantine.MantineProvider>
  )
}

This field lets you show basic text. It uses Mantine <Text> component.

Swizzle

You can swizzle this component to customize it with the refine CLI

Usage

Let's see how to use it in a basic show page:

http://localhost:3000

Live previews only work with the latest documentation.

import { useShow, useOne } from '@pankod/refine-core'
import { Show, Title, Text, TextField } from '@pankod/refine-mantine'

const PostShow: React.FC<IResourceComponentsProps> = () => {
  const { queryResult } = useShow<IPost>()
  const { data, isLoading } = queryResult
  const record = data?.data

  const { data: categoryData, isLoading: categoryIsLoading } =
    useOne<ICategory>({
      resource: 'categories',
      id: record?.category?.id,
      queryOptions: {
        enabled: !!record,
      },
    })

  return (
    <Show isLoading={isLoading}>
      <Title order={5}>Id</Title>
      <Text mt="sm">{record?.id}</Text>

      <Title mt="sm" order={5}>
        Category
      </Title>
      <TextField
        value={categoryIsLoading ? 'Loading...' : categoryData?.data?.title}
      />
    </Show>
  )
}

interface ICategory {
  id: number
  title: string
}

interface IPost {
  id: number
  category: { id: number }
}

API Reference

Properties

External Props

It also accepts all props of Mantine Text.