Nanoscale Parts Manufacturing

    This package has been deprecated

    Author message:

    Use @libreform/react-component instead

    react-libre-form

    0.4.1 • Public • Published

    react-libre-form

    Travis npm package Coveralls

    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.

    Install

    npm i react-libre-form

    DownloadsWeekly Downloads

    34

    Version

    0.4.1

    License

    MIT

    Unpacked Size

    37.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • anttiviljami
    • k1sul1