CodeEditor

Der CodeEditor unterstützt das Schreiben und Bearbeiten von Code – mit Syntax-Highlighting und optionalen Funktionen wie Zeilennummern.GitHubMarkdown

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 findest du in der Component Form (React Hook Form).

Auf dieser Seite