Module: Text

Wraps html text with some preset style options in a configurable tag container. When editable is true, the text becomes editable on focus, with accessibility and onChange support. Optionally, a hidden input can store the value for form submission, and a button can copy content to the clipboard inline.

Parameters:

Name Type Description

props

object

Component props.

Properties

Name	Type	Description
`asHtml`	boolean	Whether or not to accept HTML in the content (ignored when editable).
`children`	JSX.Element	React element children (ignored when editable).
`color`	string	The text color.
`content`	string \| number	The text content.
`copyButtonAttributes`	object	Custom attributes for the copy button.
`copyButtonClasses`	string \| Array \| object	Custom classes for the copy button.
`customAttributes`	object	Custom attributes for the component.
`customClasses`	string \| Array \| object	Custom classes for the component.
`editable`	boolean	Whether the text is editable on focus (default false).
`id`	string	Optional id attribute when editable.
`name`	string	Optional name attribute when editable.
`onBlur`	function	Handler for blur events when editable (default empty function).
`onChange`	function	Handler for text changes when editable.
`onCopy`	function	Handler for copy events when showCopyButton is true (default empty function).
`onFocus`	function	Handler for focus events when editable (default empty function).
`placeholder`	string	Placeholder text when editable and empty (default empty string).
`showCopyButton`	boolean	Whether to show a button to copy the content to the clipboard (default false).
`size`	string	The font size for the text.
`spacing`	string \| number \| Array \| object	The spacing for the component.
`tagName`	string	The tag used for the container element.
`truncate`	boolean	Whether to truncate the text (default false).
`useHiddenInput`	boolean	Whether to include a hidden input for form submission (default false).
`weight`	string	The font weight for the text.

ref

object | null

Ref to the component.

Since: 1.1.15
Source: elements/Text/index.js, line 8

Returns:

The text component.

Type:: JSX.Element

Example

// With copy button inline, non-editable
<Text content="Copy Me" showCopyButton />

// Controlled usage with copy button inline
const [text, setText] = useState("Hello world");
<Text content={text} editable onChange={setText} showCopyButton />

// Self-managed form usage with copy button inline
<form>
  <Text content="Hello world" editable useHiddenInput name="text-field" id="text-1" showCopyButton />
  <button type="submit">Submit</button>
</form>