React component for WP Libre Form

React component for WP Libre Form. Depends on @libreform/libreform, which is NOT bundled with the package, you have to install it yourself.

Installation

npm install @libreform/react-component

If you're feeling wild, you can also drop this repository under your plugins folder and activate the plugin. The component will be available under window.WPLFReactComponent. Please note that using it this way will enqueue react on every page.

Usage

Like any other component. Should work just like WPLF works without React. If you need access to the dom node, you can create a ref with useRef() and pass it into the component as property.

import LibreForm from '@libreform/react-component'

function Demo() {
  const ref = useRef(null)

  return <div>
    <h1>Demo</h1>
    <LibreForm form="form-slug" ref={ref} className="myClassName" IfErrors={YourErrorComponent} WhileLoading{YourLoadingComponent} />
  </div>
}

Props

Only form is required.

{
  form: string | number // form id or slug

  className?: string // optional custom class name
  parentRef?: React.RefObject<HTMLDivElement> // optional React ref
  referrerData?: ReferrerData // optional object used for the referrer of the sub

  IfErrors?: typeof Errors // react component
  WhileLoading?: typeof Loading // react component

  callbacks?: {
     // List of callbacks to ADD on the form.
     // Does NOT remove existing callbacks such as form reset and success message.
    [x: string]: List<FormCallback>
  }
}

Dependencies

• react
• @libreform/libreform

Gotchas

This is just a dangerouslySetInnerHTML wrapper & bindings for WPLF. There's no sanitation. You should know the risks of unrestricted HTML.