Skip to content

FieldTextRenderer control

This control renders simple text.

FieldTextRenderer control output

Covered Fields

  • Single line of text
  • Multiple lines of text
  • Choice
  • Number
  • Currency
  • Yes/No
  • Default renderer for uncovered types of fields

How to use this control in your solutions

  • Check that you installed the @pnp/spfx-controls-react dependency. Check out the getting started page for more information about installing the dependency.
  • Import the following modules to your component:
import { FieldTextRenderer } from "@pnp/spfx-controls-react/lib/FieldTextRenderer";
  • Use the FieldTextRenderer control in your code as follows:
<FieldTextRenderer text={event.fieldValue} className={'some-class'} cssProps={{ background: '#f00' }} />


The FieldTextRenderer component can be configured with the following properties:

Property Type Required Description
cssProps React.CSSProperties no CSS styles to apply to the renderer.
className ICssInput no CSS classes to apply to the renderer.
text string no Text to be rendered