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'),
  Layout: RefineChakra.Layout,
  Sider: () => null,
})

const Wrapper = ({ children }) => {
  return (
    <RefineChakra.ChakraProvider theme={RefineChakra.refineTheme}>
      {children}
    </RefineChakra.ChakraProvider>
  )
}

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 } from '@pankod/refine-core'
import {
  Show,
  Heading,
  TextField,
} from '@pankod/refine-chakra-ui'

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

  return (
    <Show isLoading={isLoading}>
      <Heading as="h5" size="sm">
        Id
      </Heading>
      <TextField value={record?.id} />
      <Heading as="h5" size="sm">
        Title
      </Heading>
      <TextField value={record?.title} />
    </Show>
  )
}

interface IPost {
  id: number
  title: string
}

API Reference

Properties

External Props

It also accepts all props of Chakra UI Text.