1.1.0 • Published 7 years ago
microfeedback-button v1.1.0
microfeedback-button
A simple widget for capturing user feedback. Use together with a microfeedback backend such as microfeedback-github.
Uses sweetalert2 under the hood to display responsive, customizable, and accessible input dialogs.
Documentation (with demos)
https://microfeedback.js.org/ui-components/microfeedback-button/
API
microfeedback([elem], [options])
elem: TheHTMLElementto bind to. If not given, the default button will be rendered.optionsurl: URL for your microfeedback backend. Ifnull, feedback will be logged to the console. May also be a function that receivesbtnandresult(the user input) as arguments and returns a URL. Default:nullbuttonText: Text to display in the default button. Default:'Feedback'buttonAriaLabel:aria-labelfor the default button. Default:'Send feedback'title: Title to display in the dialog. Default:'Send feedback'placeholder: Placeholder text in the dialog input. Default:'Describe your issue or share your ideas'backgroundColor: Background color for the default button. Default:'#3085d6'color: Color for the default button text. Default:'#fff'animation: Enable animations. Default:trueshowDialog: Function that displays a sweetalert2 dialog. Returns aPromisethat resolves to the input result. Usereturn btn.alert(...)to display the dialog.getPayload: Function that receivesbtn(theMicroFeedbackButtoninstance) and input result and returns the request payload to send to the microfeedback backend.preSend: Function that receivesbtn(theMicroFeedbackButtoninstance) and input result. This is called before sending the request to the microfeedback backend. Useful for displaying a "Thank you" message withreturn btn.alert(...).optimistic: Iftrue, display success message immediately after user submits input (don't wait for request to finish). Iffalse, wait until request finishes to show message (use together withonSuccessto customize message). Default:trueshowSuccessDialog: Function that receivesbtn(theMicroFeedbackButtoninstance) and input result and displays a dialog usingreturn btn.alert(...).onSuccess: Function called when request succeeds. Receivesbtn(theMicroFeedbackButtoninstance) and input result. By default, callsoptions.showSuccessDialog(btn, input)ifoptimisticisfalse, otherwise noop.onFailure: Function called when request fails. Receivesbtn(theMicroFeedbackButtoninstance). Default:noop
Additionally, any valid sweetalert2 option may be passed to configure the input dialog.
Methods
btn.alert(...args)
Display a sweetalert2 dialog. This is equivalent to the swal function
from sweetalert2.
Developing
npm install- To run tests:
npm test - To run tests in watch mode:
npm test -- --watch - To run the example:
npm run dev
License
MIT Licensed.