Last updated:
In the same way as embedding is completed for conventional web pages, embedding the Formcentric client in React also involves including the necessary JavaScript files.
Typically, the general approach to embedding described in the article General embedding can also be used in single-page applications. However, the React-specific embedding steps described below are recommended: these ensure a faster loading time for resources and a greater degree of freedom for developers.
To complete this step, navigate to your project’s root directory and execute the following command with your preferred package manager:
npm install @formcentric/client
You should now have a local install of the Formcentric client in your node_modules directory.
As in General embedding, the next step is to create a form container in your target component – but JSX is used here instead of HTML.
For a dynamically configurable Formcentric component, this could therefore be created as follows:
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
Please note: for the implementation shown above, themes will still be served via Formcentric, as before. To provide resources synchronously at runtime, you will also need to integrate these into the build process. You have various options here, depending on the technologies you are using and your personal preferences.
As with the client scripts, theme resources can be integrated directly into the application as SCSS and JavaScript.
Please note that the application should be configured so that it can use SCSS. With Vite, all you need to do is install SASS :
npm i sass --save-dev
Following this step, you can import the styles for your selected theme into the application as SCSS files. This means you can avoid having to inject CSS variables. You can then import both the variables and the theme itself into a prepared index.scss:
@import '@formcentric/client/dist/themes/hamburg/variables/variables.scss';
@import '@formcentric/client/dist/themes/hamburg/styles.scss';
As a final step, you import the index.scss file with import 'styles/index.scss' and the JavaScript templates with import '@formcentric/client/dist/themes/hamburg/script.js' js' into the application:
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
