react-libre-form
React component for WP Libre Form. Give it the location of your WordPress instance and the form slug (or id) and it handles the rest.
And if that's not good enough for you, it's rather flexible and can be customized.
The upcoming WP Libre Form 2.0 is going to make breaking changes to it's JS "API", and this package is going to go through some changes as well. Expect 1.0.0 of this package to only work with WP Libre Form 2.0.
Installation
npm install react-libre-form
Dependencies
There are no dependencies, except the peer dependency of html-react-parser, which is required to render the HTML WordPress outputs. If you're already using a HTML parser w/ WP REST API, I suggest that you migrate to html-react-parser, as react-html-parser is massive.
Usage
Import and configure, render like any other component
import LibreForm, { configure } from 'react-libre-form'
configure({
WordPress: 'https://libreformbuilder.local',
i18n: {
loading: 'Custom loading message',
scriptTimeout: 'Timeout while loading wplf-client.js',
}
})
class Demo extends Component {
render() {
return <div>
<h1>react-libre-form Demo</h1>
<LibreForm form="form-slug"
onSubmitSuccess={(...arg) => console.log(arg, 'success1')}
onSubmitDenied={(...arg) => console.log(arg, 'denied1')}
afterLoad={() => console.log("I'll appear after this form has loaded")}
/>
</div>
}
}
Gotchas
Submit button value is dismissed
If you have <input type="submit" value="Send form" />
in your form HTML, you might notice that the "Send form" is missing in your rendered form. TL;DR explanation on why this happens: React.
<button type="submit">Send form</button>
is functionally equivalent and works without an issue.