Quote: React
A Quote denotes a quotation or excerpt from another source, distinctively styled to stand out from the main content.
Installation
Before you can start using the @mediahuis/chameleon-react component, you'll need to install it, for more information check: Getting started for developers.
With that done, you're now ready to implement the component in your application.
import { Quote } from '@mediahuis/chameleon-react';
export default function Example() {
return <Quote quote="Example quote" />;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
as | ElementType | - | No | Allows rendering the component with a different HTML tag or a different custom component. |
cite | String | - | No | Link to the original source of the quote. |
icon | SVGType | Boolean | Quotes | No | Specifies the icon rendered inside the Quote. |
quote | String | - | Yes | The main content or text of the quote. |
quotee | String | - | No | The name of the person or entity who said or wrote the quote. |
quoteeFunction | String | - | No | The profession, title, or role associated with the quotee. |
quoteeImage | String | - | No | The image of the quotee. |
quotationMarks | Boolean | true | No | Whether or not to automatically render quotation marks around the quote. |
Quotes in different languages
Our React component adds and styles the quotation marks automatically.
The styling is specified by the lang attribute in html. For example: fr adds «angle quotes» (guillemets) instead of the common "double quotes".
Automatic quotes can be turned off by setting the quotationMarks prop to false.