React User Feedback Component

Install and use as a component

Installing the package from npmjs with yarn:

yarn add @ta-interaktiv/react-user-feedback

or with npm:

yarn add @ta-interaktiv/react-user-feedback

And afterwards, import it in the top section of your own component:

import UserFeedback from '@ta-interaktiv/react-user-feedback'

API

Table of Contents

• DatabaseFormat
  • Properties
• MESSAGES
• UserFeedback
  • Parameters
  • Examples
  • setupTest
    • Parameters
• Question
  • Parameters
• SemanticUIColors
• Stars
  • Parameters

DatabaseFormat

How the data is stored in https://ta-user-feedback.firebaseio.com/v2/stories/.

The property names are super short, so we need as little bandwidth as possible.

Please note: The previous version also saved the questions in the database. This no longer happens. Votes are only tracked positionally: the first number for the first question, the second number for the second question, etc. If you already have collected votes and then decide to change the wording of the questions or their order, you will receive "wrong" results. You might want to delete the previously collected votes directly in the Firebase Admin view and start over.

Type: {p: number, v: Array<number>}

Properties

• p number
• v Array<number>

MESSAGES

Translatable messages.

UserFeedback

Extends Component

Allows people to rate the standalone on various questions.

Parameters

• props Props
  • props.answerText string? The text people see when the overall rating average is above the top 20%.
  • props.articleId string The article ID related to this feedback.
  • props.className string? Additional class names to pass to the component.
  • props.inverted boolean Whether the component is displayed on a dark background. (optional, default false)
  • props.questions Array<string>? A list of questions to ask the readers. Defaults to 'Wie lehrreich war der Beitrag?', 'Wie unterhaltsam war er?' and 'Wie gefällt Ihnen die Gestaltung?'.
  • props.starAmount number The number of stars to use. (optional, default 5)
  • props.starColor SemanticUIColors The color of the stars and the submit button. (optional, default yellow)
  • props.title string The overall title of the component (optional, default 'Wie bewerten Sie diesen Beitrag?')
  • props.locale ("de" | "fr") The locale in which to show the component. Currently can be either French (fr) or German (de). (optional, default 'de')

Examples

<UserFeedback
  articleId='20919286'
  starColor='yellow'
  title='Wie bewerten Sie diese Geschichte?'
  answerText='Die meisten Leserinnen und Leser bewerten den Artikel als sehr
              gut. Das freut uns.'
  questions={['Wie lehrreich war der Beitrag?', 'Wie unterhaltsam war er?',
              'Wie gefällt Ihnen die Gestaltung?']}
/>

setupTest

Set up the capability we want to test for. This attaches an event listener to the window (meaning: EVERYTHING!). Upon the first interaction of that kind (like: a touch, or a mouse over, which, it being the window, should happen pretty fast), it will call the appropriate

Parameters

• eventToTestFor string
• actionHandler function (isAble: boolean): void

Question

Extends Component

Renders a single question, including the interactive stars

Parameters

• props Props
  • props.averageRating number?
  • props.inverted boolean (optional, default false)
  • props.question string
  • props.ratingHandler Function
  • props.starAmount number (optional, default 5)
  • props.starColor SemanticUIColors (optional, default yellow)
  • props.votingIsOver boolean (optional, default false)

Handle clicks on a star

SemanticUIColors

The available colors in Semantic UI

Type: ("red" | "orange" | "yellow" | "olive" | "green" | "teal" | "blue" | "violet" | "purple" | "pink" | "brown" | "grey" | "black")

Stars

Extends Component

Appends stars and returns the event when clicking on them

Parameters

• props Props
  • props.averageRating number? The rating value after rating has been done.
  • props.clickHandler Function
  • props.inverted boolean (optional, default false)
  • props.currentlySelectedRating number The currently chosen rating by the user.
  • props.starAmount number The amount of stars to show and choose from. (optional, default 5)
  • props.starColor SemanticUIColors The color of the icons (optional, default yellow)
  • props.votingIsOver boolean Whether the user is allowed to vote (optional, default false)