Tekstomrade

Tekstområde er en ren teknisk komponent som lar utviklere parse tekst (strings), og automatisk rendre HTML-markup med f.eks. avsnitt og lenker.

Standard bruk

Standard oppsettet håndterer avsnitt, linjeskift og lenker. Komponent har som mål at struktur av tekst visuelt beholdes, dvs linjeskift i input-teksten ivaretas av komponenten.

En komponent som tar ansvar for å brekke opp
tekst i avsnitt, og
legge til lenker.

Vi kan f.eks lenke til www.nav.no, og ha flere lenker på samme linje. (Les mer her; https://nav.no)

<Tekstomrade>
  {`En komponent som tar ansvar for å brekke opp \ntekst i avsnitt, og \nlegge til lenker.\n\nVi kan f.eks lenke til www.nav.no, og ha flere lenker på samme linje. (Les mer her; https://nav.no)`}
</Tekstomrade>

Kopiert!

Avansert bruk

Komponenten er regel-basert, og åpner opp for at konsumenter kan lage sine egne rendering-regler ved behov. For å endre reglene som er aktive kan man sende inn en liste av regler man ønsker via rules-propen.

Vi kan bruke helt egne regler her
import Tekstomrade, {
  createDynamicHighlightingRule,
  HighlightRule,
  BoldRule,
} from "nav-frontend-tekstomrade";

<Tekstomrade
  rules={[HighlightRule, BoldRule, createDynamicHighlightingRule(["ruk"])]}
>
  {`*Vi* kan bruke helt egne regler _her_`}
</Tekstomrade>;

Kopiert!

Komponenten kommer med ett sett av ferdig-implementerte regler;

  • LinebreakRule
  • ParagraphRule
  • HighlightRule
  • createDynamicHighlightingRule
  • BoldRule
  • LinkRule

For dokumentasjon av regel-utvikling se parser biblioteket