Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

@juno0424/hapi

Package Overview
Dependencies
2
Maintainers
1
Versions
30
Issues
File Explorer

Advanced tools

@juno0424/hapi

Wrapper of Alpine JS plugin for HAPI Form, works on Laravel API endpoint. ## CDN ```html <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> <script src="https://unpkg.com/@juno0424/hapi@latest/dist/hapi.min.js"></script> ```

    0.8.3latest
    npm

Version published
Maintainers
1
Weekly downloads
717
decreased by-12.77%

Weekly downloads

Readme

Source

HAPI Form Plugin

Wrapper of Alpine JS plugin for HAPI Form, works on Laravel API endpoint.

CDN

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> <script src="https://unpkg.com/@juno0424/hapi@latest/dist/hapi.min.js"></script>

Usage

<script> Hapi.form({ name: "", endpoint: "", redirectTo: "", fileUpload: { filepond: filepondObject, el: '#files' }, onSuccess(res) {}, onFailed(err) {} }); </script>
  • name – The name of the instance, to be matched with x-data="name".
  • endpoint – The form endpoint URL generated from the backend.
  • redirectTo – Location to be redirected after success. Eg: "/thank-you" or "https://example.com". (Optional)
  • fileUpload
    • filepond – Filepond object. (Filepond plugin required)
    • el – Select input element if you're using normal upload.
  • onSuccess() – On success event.
  • onFailed() – On failed event.

Array data

Hapi.form({ fields: { colors; [] // Example an empty array of colors }, name: "", endpoint: "", });

Alpine.js data

Sometimes you might need to set data for Alpine.js, I got your back.

Hapi.form({ ... open: false, });

Events

Success Event

When submission is success, Hapi will emit hapi:success event.

Error Event

When submission has error, Hapi will emit hapi:error event.

FAQs

Last updated on 22 Jun 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc