Feedback

Usage

import { Feedback } from '@wdzyi/ui';

<Feedback
  question='Was this page helpful?'
  onSubmit={({ rating, text }) =>
    fetch('/api/feedback', { method: 'POST', body: JSON.stringify({ page: slug, rating, text }) })
  }
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

questionstring = 'Was this helpful?'

What it asks, beside the faces. It names the faces for screen readers too.

onSubmit(feedback: { rating: 1 | 2 | 3 | 4; text: string }) => void | Promise<unknown>

Called when Send is pressed, with the face, from 1 for very unhappy to 4 for very happy, and the words, trimmed. Return a promise to keep it working until it settles. If it rejects, the box stays open to try again.

placeholderstring = 'Anything we could do better?'

In the box before anything’s typed.

thanksstring = 'Thanks, that helps'

What it says once it’s sent.

classNamestring

Added to it. It fills the width it’s given.

Notes

• Choosing a face opens the box by its rows over 460ms, while the other faces fold away and the chosen one fills with ink. Each face is drawn on a ten by ten grid, two pixels a square, so its edges are sharp.
• Send works for at least a second, or for as long as what onSubmit returns takes, with its label morphing to Sending beside the pixels. Then the question gives way to the thanks, up out of a 2px blur, the box shuts, and the face settles back onto a plate beside it.
• The arrows move between the faces, and Enter or Space chooses one, taking focus to the box. Ctrl or Command with Enter sends, and Escape or Cancel shuts it without sending, handing focus back to the face. The thanks is announced, and takes focus if Send had it.
• With reduced motion, the box opens and shuts at once, and the words change with a plain fade.