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}
);
};
|
Formatted Text | import FormattedText from "@/lib/FormattedText";
const FormattedText = ({ formattedText }) => {
return (
<FormattedText>{formattedText}</FormattedText>
);
};
|
Link | const Link = ({ link }) => {
return (
<a href={link}>Link text</a>
);
};
|
Image | import Image from "@/lib/Image";
const Image = ({ image }) => {
return (
<Image {...image} />
);
};
|
Boolean | const Boolean = ({ boolean }) => {
return (
{boolean && <h1>Boolean: checked</h1>}
{!boolean && <h1>Boolean: unchecked</h1>}
);
};
|
Integer | const Integer = ({ integer }) => {
return (
<h1 style=`padding-top: ${integer}px`>Heading with spacing</h1>
);
};
|
List: text | import FormattedText from "@/lib/FormattedText";
import { cva } from 'class-variance-authority';
const variants = cva('', {
variants: {
layout: {
left: 'text-left',
center: 'text-center',
},
},
defaultVariants: {
layout: 'left',
},
});
const ListText = ({ listText }) => {
return (
<h1 className={variants({ layout: listText })>Heading text</h1>
);
};
|
List: integer | const ListInteger = ({ listInteger }) => {
return (
<h1 style=`padding-top: ${listInteger}px`>Heading with spacing</h1>
);
};
|