docs.reactLibrary.pageTitle
docs.reactLibrary.pageDescription
docs.reactLibrary.features.typescript
docs.reactLibrary.features.typescriptDesc
docs.reactLibrary.features.lightweight
docs.reactLibrary.features.lightweightDesc
docs.reactLibrary.features.ssr
docs.reactLibrary.features.ssrDesc
docs.reactLibrary.installation.title
npm
npm install @askusers/widget-react
yarn
yarn add @askusers/widget-react
pnpm
pnpm add @askusers/widget-react
docs.reactLibrary.quickStart.title
docs.reactLibrary.quickStart.description
import { FormWidget, SurveyWidget } from '@askusers/widget-react';
import '@askusers/widget-react/styles';
function App() {
return (
<div>
{/* Inline form */}
<FormWidget
formId="your-form-id"
apiKey="your-api-key"
/>
{/* Inline survey */}
<SurveyWidget
surveyId="your-survey-id"
apiKey="your-api-key"
/>
</div>
);
}docs.reactLibrary.quickStart.noteLabel docs.reactLibrary.quickStart.noteText
docs.reactLibrary.formWidget.title
docs.reactLibrary.formWidget.description
import { FormWidget } from '@askusers/widget-react';
import '@askusers/widget-react/styles';
function ContactPage() {
return (
<FormWidget
formId="contact-form-id"
apiKey="your-api-key"
theme="auto"
hideTitle={false}
transparentBackground={true}
onSubmitSuccess={() => {
console.log('Form submitted successfully!');
}}
onSubmitError={(error) => {
console.error('Submission failed:', error);
}}
/>
);
}docs.reactLibrary.surveyWidget.title
docs.reactLibrary.surveyWidget.description
import { SurveyWidget } from '@askusers/widget-react';
import '@askusers/widget-react/styles';
function FeedbackPage() {
return (
<SurveyWidget
surveyId="feedback-survey-id"
apiKey="your-api-key"
theme="light"
hideDescription={true}
transparentBackground={true}
onSubmitSuccess={() => {
console.log('Survey completed!');
}}
/>
);
}docs.reactLibrary.props.title
| docs.reactLibrary.props.prop | docs.reactLibrary.props.type | docs.reactLibrary.props.default | docs.reactLibrary.props.description |
|---|---|---|---|
formId / surveyId * | string | - | docs.reactLibrary.props.formIdDesc |
apiKey * | string | - | docs.reactLibrary.props.apiKeyDesc |
baseUrl | string | api.askusers.org | docs.reactLibrary.props.baseUrlDesc |
theme | 'light' | 'dark' | 'auto' | 'auto' | docs.reactLibrary.props.themeDesc |
hideTitle | boolean | false | docs.reactLibrary.props.hideTitleDesc |
hideDescription | boolean | false | docs.reactLibrary.props.hideDescriptionDesc |
transparentBackground | boolean | false | docs.reactLibrary.props.transparentBackgroundDesc |
showPoweredBy | boolean | true | docs.reactLibrary.props.showPoweredByDesc |
className | string | - | docs.reactLibrary.props.classNameDesc |
* docs.reactLibrary.props.required
docs.reactLibrary.callbacks.title
| docs.reactLibrary.callbacks.callback | docs.reactLibrary.callbacks.signature | docs.reactLibrary.callbacks.description |
|---|---|---|
onLoad | () => void | docs.reactLibrary.callbacks.onLoadDesc |
onSubmit | (data) => void | docs.reactLibrary.callbacks.onSubmitDesc |
onSubmitSuccess | () => void | docs.reactLibrary.callbacks.onSubmitSuccessDesc |
onSubmitError | (error: Error) => void | docs.reactLibrary.callbacks.onSubmitErrorDesc |
docs.reactLibrary.theming.title
docs.reactLibrary.theming.description
<FormWidget formId="your-form-id" theme="dark" className="my-custom-form" />
docs.reactLibrary.typescript.title
docs.reactLibrary.typescript.description
import type { FormWidgetProps, SurveyWidgetProps } from '@askusers/widget-react';
const formProps: FormWidgetProps = {
formId: 'my-form-id',
theme: 'auto',
onSubmitSuccess: () => console.log('Success!'),
};docs.reactLibrary.nextjs.title
docs.reactLibrary.nextjs.description
'use client';
import { FormWidget } from '@askusers/widget-react';
import '@askusers/widget-react/styles';
export default function FeedbackForm() {
return (
<FormWidget
formId="your-form-id"
theme="auto"
/>
);
}docs.reactLibrary.nextjs.noteLabel docs.reactLibrary.nextjs.noteText