react-libre-form

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.