Props are configurable fields that make components user-friendly and simplify content creation.
Props are used to:
Create fields that can be filled without editing the code. For example, Title, Description, and Button Text.
Select colors, sizes, alignments, or behaviors from pre-defined options.
Present options as familiar UI controls such as dropdowns, toggles, and color pickers.
Set appropriate defaults so that components work well out-of-the-box.
Example: A Featured Content component might have configurable props for headline text, subtitle, image, background color, and button label without showing the underlying markup.
The prop name is automatically converted to camelCase. For example, if the prop name is Heading Text, it can be accessed in the component as headingText.
The following table lists the available prop types:
Name
Example Usage
Text
const Text = ({ text }) => {
return (
{text}
);
};
Props are configurable fields that make components user-friendly and simplify content creation.
Props are used to:
Create fields that can be filled without editing the code. For example, Title, Description, and Button Text.
Select colors, sizes, alignments, or behaviors from pre-defined options.
Present options as familiar UI controls such as dropdowns, toggles, and color pickers.
Set appropriate defaults so that components work well out-of-the-box.
Example: A Featured Content component might have configurable props for headline text, subtitle, image, background color, and button label without showing the underlying markup.
The prop name is automatically converted to camelCase. For example, if the prop name is Heading Text, it can be accessed in the component as headingText.
The following table lists the available prop types:
Name
Example Usage
Text
const Text = ({ text }) => {
return (
{text}
);
};
Acquia Source