Components

CodeEditor

Der CodeEditor unterstützt beim Schreiben und Bearbeiten von Code innerhalb der Oberfläche. Er bietet ein Syntax-Highlighting für verschiedene Programmiersprachen und optionale Funktionen wie Zeilennummern, einklappbare Codebereiche sowie eine Kopierfunktion.GitHub

Playground

Verwende <CodeEditor />, um einen CodeEditor anzuzeigen. Gib den anzuzeigenden Inhalt im value Property an. Nutze das language Property, um die Programmiersprache (siehe unterstütze language imports) zu definieren. So erhält der Code das korrekte Syntax-Highlighting.

import { CodeEditor } from "@mittwald/flow-react-components";

<CodeEditor
  language="tsx"
  value={
    'import React, { FC } from "react";\n' +
    "\n" +
    "const ExampleCodeComponent: FC = () => {\n" +
    "  \n" +
    "  useEffect(() => {\n" +
    "    // some effect \n" +
    "  }, []);\n" +
    "  \n" +
    "  return <>Example JSX</>;\n" +
    "};"
  }
/>

Kombiniere mit ...

React Hook Form

Weitere Details zur Formularlogik und -validierung sind in der Component Form (React Hook Form) zu finden.

Overview