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'
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>}
Translatable messages.
Extends Component
Allows people to rate the standalone on various questions.
-
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, defaultfalse
) -
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, default5
) -
props.starColor
SemanticUIColors The color of the stars and the submit button. (optional, defaultyellow
) -
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'
)
-
<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?']}
/>
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
Extends Component
Renders a single question, including the interactive stars
-
props
Props
Handle clicks on a star
The available colors in Semantic UI
Type: ("red"
| "orange"
| "yellow"
| "olive"
| "green"
| "teal"
| "blue"
| "violet"
| "purple"
| "pink"
| "brown"
| "grey"
| "black"
)
Extends Component
Appends stars and returns the event when clicking on them
-
props
Props-
props.averageRating
number? The rating value after rating has been done. -
props.clickHandler
Function -
props.inverted
boolean (optional, defaultfalse
) -
props.currentlySelectedRating
number The currently chosen rating by the user. -
props.starAmount
number The amount of stars to show and choose from. (optional, default5
) -
props.starColor
SemanticUIColors The color of the icons (optional, defaultyellow
) -
props.votingIsOver
boolean Whether the user is allowed to vote (optional, defaultfalse
)
-