BugButton
Description
This is the component you will be putting on your app to collect bugs.
Go ahead and click it (it's interactive)-- and see the glory of the bug button. Hit escape or the Cancel button to come back to the page.
The fallback content to display on prerendering
Props
id
- Astring
you get from our Console to connect to your bug system.apikey
- Astring
you get from our Console to connect to your bug system. This can be regnerated for security.position
- Astring
used to staticly position the BugButton.- "bottom-right"
- "bottom-left"
userbugreport
- Aobject
, any thing that can be serialized as JSON, that you can use to store your own data, which will be passed along with any issue created. Useful for putting in say -- your end user's ID.theme
- Anobject
of name value pairs that works with MUI themes.onBugButtonClicked
- Afunction
, called with the user clicks, but before the dialog is shown.onBeforeBugSubmitted
- Afunction(BugButtonSubmission)
, called after the user clicks, before going to our server.onAfterBugSubmitted
- Afunction(BugButtonSubmission)
, called after the bug is sent to our server.onBugError
- Afunction(BugButtonSubmission, Error)
, called after the bug is sent to our server.pinStyle
- AnReact.CSSProperties
of React styles, applied to pins.noteStyle
- AnReact.CSSProperties
of React styles, applied to notes.
Default UI
A button you can easily fit in your UI to collect bugs.
import { BugButton } from "@userbugreport/bugbutton-react";
<BugButton
apiKey="sample"
onBeforeBugSubmitted={() => {
console.log("submitting");
// you can also set a 'global' extra data on .userbugreport any time you like
// and it will be merged with the `userbugreport` prop
window.userbugreport = { extra: "🌶" };
}}
onAfterBugSubmitted={() => console.log("submitted")}
onBugError={(submission, error) => console.error(submission, error)}
/>;
The fallback content to display on prerendering
Custom UI
Learn all about customizing