react-text-highlight

English Readme Here

Auteur: Exaland Concept - Alexandre MAGNIER

Composants de surlignage & soulignage premium pour React.

Demonstration

Online Demonstration

12 variants animés : marker, brush, brushstroke, gradient, slide, glow, scratch, double, wave, pill, dashed, blur.

Installation

npm  install  react-text-highlight

# ou

yarn  add  react-text-highlight

# ou

pnpm  add  react-text-highlight

Ce composant utilise des classes Tailwind CSS. Assurez-vous que Tailwind est configuré dans votre projet.

Usage

import TextHighlight from  'react-text-highlight';

  

<TextHighlight  variant="marker"  color="yellow">

livraison express

</TextHighlight>

Variants

| 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 |

Couleurs disponibles

yellow · cyan · green · pink · orange · purple · blue · red · neonCyan · neonPurple · neonGreen

Props

| 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 |

Exemples

// 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>

Build

npm  run  build

Licence

MIT