Auteur: Exaland Concept - Alexandre MAGNIER
Composants de surlignage & soulignage premium pour React.
22 variants animés : marker, brush, brushstroke, gradient, slide, glow, scratch, double, wave, pill, dashed, blur, shimmer, underline-animated, stamp, neon-border, rainbow, spotlight, typewriter, ink-drip, splatter, chrome.
npm install react-text-underline
# ou
yarn add react-text-underline
# ou
pnpm add react-text-underline
Ce composant utilise des classes Tailwind CSS. Assurez-vous que Tailwind est configuré dans votre projet.
import TextHighlight from 'react-text-underline';
<TextHighlight variant="marker" color="yellow">
livraison express
</TextHighlight>| Variant | Description |
|----------------|-------------------------------------------|
| marker | Marqueur fluorescent au hover |
| brushstroke | Trait de pinceau SVG sous le texte |
| gradient | Underline dégradé animé au hover |
| slide | Fond coloré qui glisse depuis la gauche |
| glow | Texte lumineux avec halo coloré |
| scratch | Trait irrégulier façon crayon |
| double | Double ligne élégante |
| wave | Soulignage ondulé SVG |
| pill | Surlignage capsule arrondi |
| dashed | Soulignage en tirets animé |
| blur | Halo diffus sous le texte |
| shimmer | Effet de scintillement/paillettes |
| underline-animated | Soulignage animé avec effet de dessin |
| stamp | Effet de tampon incliné |
| neon-border | Bordure néon avec halo lumineux |
| rainbow | Effet arc-en-ciel animé |
| spotlight | Effet projecteur/éclairage |
| typewriter | Effet machine à écrire sur le surlignage |
| ink-drip | Effet d'encre qui s'écoule |
| splatter | Effet d'éclaboussure |
| chrome | Effet chromé/métallique |
yellow · cyan · green · pink · orange · purple · blue · red · black · neonCyan · neonPurple · neonGreen · gold · silver · coral · turquoise · lime · pastelPink · pastelBlue · pastelGreen · pastelYellow · darkPurple · darkBlue · darkGreen
| Prop | Type | Défaut | Description |
|-------------|--------------------|------------|--------------------------------------|
| variant | HighlightVariant | 'marker' | Style de mise en valeur |
| color | HighlightColor | 'yellow' | Couleur de l'effet |
| animate | boolean | true | Active l'animation au hover |
| className | string | '' | Classes CSS additionnelles |
| children | ReactNode | — | Texte à mettre en valeur |
// Brushstroke permanent (sans hover)
<TextHighlight variant="brushstroke" color="cyan" animate={false}>
applications mobiles
</TextHighlight>
// Underline dégradé au hover
<TextHighlight variant="gradient" color="purple">
Découvrir
</TextHighlight>
// Fond qui glisse
<TextHighlight variant="slide" color="green">
éprouvées
</TextHighlight>
// Texte brillant néon
<TextHighlight variant="glow" color="neonCyan">
BRAND NAME
</TextHighlight>
// Trait crayon permanent
<TextHighlight variant="scratch" color="orange" animate={false}>
sur mesure
</TextHighlight>
// Double ligne
<TextHighlight variant="double" color="pink">
expertise
</TextHighlight>
// Soulignage ondulé
<TextHighlight variant="wave" color="blue">
solutions clé en main
</TextHighlight>
// Capsule arrondie
<TextHighlight variant="pill" color="purple">
nouvelle collection
</TextHighlight>
// Soulignage en tirets
<TextHighlight variant="dashed" color="red">
édition limitée
</TextHighlight>
// Halo flou
<TextHighlight variant="blur" color="neonGreen">
focus instantané
</TextHighlight>npm run build
MIT