Zuletzt geändert am:
Analog zur Einbettung auf herkömmlichen Websites erfolgt die Einbettung des Formcentric-Clients in React ebenfalls über die Einbindung der hierfür notwendigen JavaScript-Dateien.
Der im Artikel Allgemeine Einbettung beschriebene Einbettungsansatz lässt sich in der Regel auch in Single-Page-Anwendungen anwenden. Die im Folgenden beschriebenen React-spezifischen Einbettungsschritte werden jedoch empfohlen, um eine schnellere Ladezeit der Ressourcen und mehr Freiraum bei der Entwicklung zu gewährleisten.
Navigieren Sie hierzu in das Root-Verzeichnis Ihres Projekts und führen Sie folgenden Befehl mit dem Package Manager Ihrer Wahl aus:
npm install @formcentric/client
Danach sollte in Ihrem node_modules Verzeichnis der Formcentric-Client lokal installiert sein.
Erstellen Sie im Anschluss, analog zur allgemeinen Einbettung, einen Formular-Container in der gewünschten Komponente, hier jedoch als JSX, anstatt als HTML.
Eine dynamisch konfigurierbare Formcentric-Komponente könnte zum Beispiel folgendermaßen aussehen:
import { useEffect } from 'react'
import '@formcentric/client/dist/formapp.js'
import '@formcentric/client/dist/formcentric.js'
declare global {
interface Window {
formcentric: {
initFormcentric: () => void
}
}
}
interface FormcentricProps {
id: string
}
const Formcentric = ({id}: FormcentricProps) => {
useEffect(() => {
window.formcentric.initFormcentric()
}, [])
return (
<section>
<div
data-fc-id={id}
data-fc-src-url="https://form.formcentric.com"
/>
</section>
)
}
export default Formcentric
Beachten Sie, dass mit der oben dargestellten Implementierung Themes nach wie vor über Formcentric ausgeliefert werden. Um die Ressourcen synchron zur Laufzeit bereitzustellen, müssen Sie diese noch in den Build-Prozess integrieren. Hierfür stehen Ihnen mehrere Möglichkeiten zur Verfügung, abhängig von den von Ihnen verwendeten Technologien und Ihren persönlichen Präferenzen.
Die Theme-Ressourcen können direkt als SCSS und JavaScript in die Anwendung integriert werden, ähnlich wie die Client-Skripte.
Beachten Sie dabei, dass die Anwendung für die Verwendung von SCSS konfiguriert sein sollte. Mit Vite genügt es, hierfür SASS zu installieren:
npm i sass --save-dev
Danach können Sie die Styles des ausgewählten Themes als SCSS Dateien in die Anwendung importieren. Das Injizieren von CSS-Variablen wird dadurch überflüssig. Sowohl die Variablen als auch das Theme selbst können Sie dann in eine angelegte index.scss Datei importieren:
@import '@formcentric/client/dist/themes/hamburg/variables/variables.scss';
@import '@formcentric/client/dist/themes/hamburg/styles.scss';
Importieren Sie anschließend die index.scss Datei mit import 'styles/index.scss' und die JavaScript-Templates mit import '@formcentric/client/dist/themes/hamburg/script.js' in die Anwendung:
import { useEffect } from 'react'
import 'styles/index.scss'
import '@formcentric/client/dist/themes/hamburg/script.js';
import '@formcentric/client/dist/formapp.js'
import '@formcentric/client/dist/formcentric.js'
declare global {
interface Window {
formcentric: {
initFormcentric: () => void
}
}
}
interface FormcentricProps {
id: string
}
const Formcentric = ({id}: FormcentricProps) => {
useEffect(() => {
window.formcentric.initFormcentric()
}, [])
return (
<section>
<div
data-fc-id={id}
data-fc-src-url="https://form.formcentric.com"
data-fc-skip-templates-load="true"
/>
</section>
)
}
export default Formcentric
