User Feedback – NimbleDocs

The Feedback component is a simple and effective way to collect user feedback in your application. It presents the user with a "Yes" or "No" question, typically asking if the content was helpful.

Component

The component is used in the following way:


1<Feedback className="your-custom-class" />

When a user submits their feedback, the onSubmit function is triggered. This function prevents the default form submission event, and sets the isSubmitted state to true.

/components/articles/feedback.tsx


1function onSubmit(e: SyntheticEvent<HTMLFormElement, SubmitEvent>) {
2  e.preventDefault()
3
4  // TODO: Do something with the response
5  // e.nativeEvent.submitter?.dataset.response => "yes" or "no"
6
7  setIsSubmitted(true)
8}

How to Store Feedback

The Feedback component does not store user feedback. It is up to you to decide how you want to store the feedback. Here are some options:

Analytics Event

This is the simplest way to store user feedback. Here is an example using Vercel Analytics:

/components/articles/feedback.tsx


1import { track } from '@vercel/analytics'
2import { usePathname } from "next/navigation"
3
4export const Feedback = () => {
5  const pathname = usePathname()
6
7  function onSubmit(e: SyntheticEvent<HTMLFormElement, SubmitEvent>) {
8    e.preventDefault()
9
10    track('User Feedback', {
11      pathname,
12      response: e.nativeEvent.submitter?.dataset.response,
13    });
14
15    setIsSubmitted(true)
16  }
17
18  // ...
19}

Redux store

If you are using Redux, you can dispatch an action to store the feedback in your Redux store. Here is an example:

/components/articles/feedback.tsx


1import { useDispatch } from 'react-redux'
2import { usePathname } from "next/navigation"
3
4export const Feedback = () => {
5  const dispatch = useDispatch()
6  const pathname = usePathname()
7
8  function onSubmit(e: SyntheticEvent<HTMLFormElement, SubmitEvent>) {
9    e.preventDefault()
10
11    dispatch({
12      type: 'FEEDBACK_SUBMITTED',
13      payload: {
14        pathname,
15        response: e.nativeEvent.submitter?.dataset.response,
16      },
17    })
18
19    setIsSubmitted(true)
20  }
21
22  // ...
23}

API request

You can also send the feedback to your own API. Here is an example using native fetch API:

/components/articles/feedback.tsx


1import { usePathname } from "next/navigation"
2
3export const Feedback = () => {
4  const pathname = usePathname()
5
6  function onSubmit(e: SyntheticEvent<HTMLFormElement, SubmitEvent>) {
7    e.preventDefault()
8
9    fetch('/api/feedback', {
10      method: 'POST',
11      body: JSON.stringify({
12        pathname,
13        response: e.nativeEvent.submitter?.dataset.response,
14      }),
15    })
16
17    setIsSubmitted(true)
18  }
19
20  // ...
21}