Back to Component Library Return to the main component library index
Code Components
Composants de code CustomCodeBlock Bloc de code avancé avec remplacement de point d’ancrage, notes préalables/postérieures et section de sortie facultative expandable.
Import : import { CustomCodeBlock } from "/snippets/components/content/code.jsx" ;
Props : Prop Type Par défaut Requis Description filenamestring- Non Nom du fichier à afficher dans l’en-tête iconstring- Non Icône à afficher dans l’en-tête languagestring- Non Langage de programmation pour la mise en évidence de la syntaxe highlightstring- Non Numéros de lignes/plages à mettre en évidence (par exemple, “1-3,5”) codeStringstring""Non Le contenu du code à afficher placeholderValuestring""Non Valeur à remplacer par wrapbooleantrueNon Si les lignes longues doivent être enveloppées linesbooleantrueNon Afficher les numéros de ligne preNotestring""Non Note à afficher avant le bloc de code postNotestring""Non Note à afficher après le bloc de code outputobject- Non Configuration de sortie facultative output.codeStringstring- Non Contenu du code de sortie output.filenamestring- Non Nom du fichier de sortie output.iconstring- Non Icône de sortie output.languagestring- Non Langue de sortie
Exemples : Basic
With Placeholder
Code
const apiKey = 'your-key-here';
Add this to your configuration file
const API_KEY = 'your-api-key-here';
< CustomCodeBlock filename = "example.js" language = "javascript" codeString = "const apiKey = 'your-key';" preNote = "Configuration example" postNote = "Remember to keep your API key secure" />
CodeComponent Composant enveloppe de bloc de code simple.
Importer : import { CodeComponent } from "/snippets/components/content/code.jsx" ;
Props : Accepte les props standards du composant CodeBlock (language, filename, icon, etc.)Remarque : C’est un wrapper autour du composant CodeBlock de Mintlify.ComplexCodeBlock Bloc de code avancé avec plusieurs fonctionnalités, notamment le remplacement des espaces réservés et les sections de sortie.
Importer : import { ComplexCodeBlock } from "/snippets/components/content/code.jsx" ;
Props : Similaire à CustomCodeBlock avec une gestion supplémentaire de la complexité.CodeSection Wrapper de section pour organiser plusieurs blocs de code.
Importer : import { CodeSection } from "/snippets/components/content/code.jsx" ;
Props : Prop Type Défaut Requis Description childrenReactNode- Oui Blocs de code à afficher
External Content
Contenu externe ContenuExterne Composant réutilisable pour afficher du contenu externe GitHub avec un en-tête et un conteneur défilable.
Importer : import { ExternalContent } from "/snippets/components/content/external-content.jsx" ;
Props : Prop Type Défaut Requis Description repoNamestring- Oui Nom du dépôt (par exemple, “livepeer/awesome-livepeer”) githubUrlstring- Oui URL du dépôt GitHub complet maxHeightstring"1000px"Non Hauteur maximale du conteneur défilable iconstring"github"Non Icône à afficher dans l’en-tête childrenReactNode- Oui Contenu à afficher (généralement importé MDX)
Exemples : External content from the Livepeer documentation repository.
Automatically styled container Link to GitHub source import MyContent from '/snippets/external/my-content.mdx' < ExternalContent repoName = "livepeer/awesome-livepeer" githubUrl = "https://github.com/livepeer/awesome-livepeer" maxHeight = "800px" > < MyContent /> </ ExternalContent >
API Response Fields
Champs de réponse d’API ValueResponseField Wrapper ResponseField qui affiche une valeur avec un label et un style de ligne optionnels.
Import : import { ValueResponseField } from "/snippets/components/content/responseField.jsx" ;
Props : Prop Type Défaut Requis Description descriptionstring|function- Non Texte de description ou fonction qui retourne une description postanynullNon Valeur à afficher après la description labelstring"value"Non Étiquette pour la valeur linebooleantrueNon Si afficher la ligne de bord inférieure childrenReactNode- Non Contenu supplémentaire ...propsobject- Non Propriétés supplémentaires de ResponseField (nom, type, par défaut, requis, etc.)
CustomResponseField Wrapper ResponseField qui masque le séparateur inférieur.
Importation : import { CustomResponseField } from "/snippets/components/content/responseField.jsx" ;
Props : Propriété Type Défaut Requis Description descriptionstring- Non Texte de description ...propsobject- Non Toutes les propriétés de ResponseField (nom, type, par défaut, requis, post, etc.)
ResponseFieldExpandable Groupe plusieurs champs de réponse dans une section repliable.
Importation : import { ResponseFieldExpandable } from "/snippets/components/content/responseField.jsx" ;
Propriétés : Prop Type Défaut Requis Description fieldsArray|Object{}Non Tableau ou objet des définitions de champ ...propsobject- Non Propriétés des composants expansibles (titre, etc.)
ResponseFieldAccordion Groupe plusieurs champs de réponse dans un composant onglet.
Importer : import { ResponseFieldAccordion } from "/snippets/components/content/responseField.jsx" ;
Props : Prop Type Défaut Requis Description fieldsArray|Object{}Non Tableau ou objet des définitions de champ ...propsobject- Non Propriétés du composant Accordion (titre, etc.)
ResponseFieldGroup Wrapper qui choisit un layout d’accordion ou déroulable à l’exécution.
Import: import { ResponseFieldGroup } from "/snippets/components/content/responseField.jsx" ;
Props: Prop Type Par défaut Requis Description componentstring"accordion"Non Type de composant : « accordion » ou « expandable » fieldsArray|Object{}Non Tableau ou objet des définitions de champ ...propsobject- Non Props du composant (titre, etc.)
Data Display Components
Composants d’affichage des données BlogCard Composant de carte spécifiquement conçu pour les articles de blog avec prise en charge du temps de lecture et de l’extrait.
Importer : import { BlogCard } from "/snippets/components/content/data.jsx" ;
Props : Prop Type Défaut Requis Description titlestring- Oui Le titre de l’article de blog contentstring- Oui Contenu HTML à afficher hrefstring- Oui Lien URL pour l’article de blog authorstring"Livepeer Team"Non Nom de l’auteur datePostedstringnullNon Date de publication excerptstringnullNon Extrait court (utilisez-le si vous reliez à un blog externe) readingTimenumbernullNon Temps estimé de lecture en minutes iconstring"book-open"Non Icône pour la carte ctastring"Read More"Non Texte du bouton d’appel à l’action imgstringnullNon URL d’image facultative
PostCard Composant de carte pour afficher des messages de forum ou des articles avec l’auteur, la date et les métadonnées.
Importation : import { PostCard } from "/snippets/components/content/data.jsx" ;
Props : Prop Type Défaut Requis Description titlestring- Oui Le titre de l’article contentstring- Oui Contenu HTML à afficher hrefstring- Oui Lien URL pour la carte authorstring"Unknown"Non Nom de l’auteur datePostedstringnullNon Date de publication du message iconstring"book-open"Non Icône à afficher sur la carte ctastring"Read More"Non Texte du bouton d’appel à l’action imgstringnullNon URL d’image facultative pour la carte
CardBlogDataLayout Composant de mise en page pour afficher plusieurs BlogCards dans un layout vertical.
Importation : import { CardBlogDataLayout } from "/snippets/components/content/data.jsx" ;
Props : Prop Type Défaut Requis Description itemsArray[]Non Tableau d’objets props BlogCard limitnumber- Non Limite optionnelle sur le nombre d’éléments
ColonnesBlogCardLayout Composant de mise en page pour afficher plusieurs BlogCards en colonnes.
Importation : import { ColumnsBlogCardLayout } from "/snippets/components/content/data.jsx" ;
Props : Prop Type Par défaut Requis Description itemsArray[]Non Tableau d’objets props BlogCard colsnumber2Non Nombre de colonnes limitnumber- Non Limite optionnelle sur le nombre d’éléments
CardColumnsPostLayout Composant de mise en page pour afficher plusieurs PostCards en colonnes.
Importation : import { CardColumnsPostLayout } from "/snippets/components/content/data.jsx" ;
Props : Prop Type Défaut Requis Description colsnumber2Non Nombre de colonnes à afficher itemsArray[]Non Tableau d’objets de propriétés PostCard limitnumber- Non Limite optionnelle sur le nombre d’éléments
DiscordAnnouncements Affiche les annonces Discord depuis discordAnnouncementsData.jsx.
Importation : import { DiscordAnnouncements } from "/snippets/components/content/data.jsx" ;
Props : Prop Type Défaut Requis Description itemsArray[]Non Tableau d’objets d’annonce limitnumber- Non Limite optionnelle sur le nombre d’annonces
Remarque : Requiert des données de snippets/automations/discord/discordAnnouncementsData.jsxLumaEvents Affiche les événements Luma à partir de lumaEventsData.jsx.
Importation : import { LumaEvents } from "/snippets/components/content/data.jsx" ;
Props : Prop Type Par défaut Requis Description dataObject- Oui Objet de données d’événement avec des tableaux prochains et passés limitnumber- Aucun Limite optionnelle sur le nombre d’événements typestring"upcoming"Aucun Type d’événements : “upcoming”, “past” ou “all”
Remarque : Requiert des données de snippets/automations/luma/lumaEventsData.jsx
Version Components
Composants de la version DernièreVersion Wrapper pour l’action GitHub qui récupère la dernière version de go-livepeer.
Importation : import { LatestVersion } from "/snippets/components/content/release.jsx" ;
Propriétés : Prop Type Défaut Requis Description versionstring- Oui Chaîne de version (généralement provenant d’une action GitHub)
Next: Layout Components Continue to Layout Components →
Last modified on March 1, 2026
Code Components