To add to your React app,
npm install react-simple-user-feedback
or with Yarn,
yarn add react-simple-user-feedback
See the following example live here
import React, { Component } from 'react';
import { BinaryFeedback } from 'react-simple-user-feedback';
class Example extends Component {
constructor(props){
this.state = {
positiveCount: 0,
negativeCount: 0
}
}
onPositiveClick = () => {
this.setState(prevState => {
return { positiveCount: prevState.positiveCount + 1 }
});
}
onNegativeClick = () => {
this.setState(prevState => {
return { negativeCount: prevState.negativeCount + 1 }
});
}
render(){
return (
<div>
<BinaryFeedback
onPositiveClick={this.onPositiveClick}
onNegativeClick={this.onNegativeClick}
/>
</div>
);
}
}The Binary Feedback component is used to gather feedback in which there are two options. Default look is the "thumbs up" and "thumbs down" format.
This component takes the following props:
| Name | Type | Default | Description |
|---|---|---|---|
| onPositiveClick | Function | Required | Callback function called when positive button is clicked |
| onNegativeClick | Function | Required | Callback function called when negative button is clicked |
| singleSelect | Boolean | false |
When the user selects a response, disable the other button to disable potentially multiple responses. |
| positiveContent | String, JSX | Thumbs Up SVG | Content that goes on the positive button |
| negativeContent | String, JSX | Thumbs Down SVG | Content that goes on the negative button |
| positive | boolean | false | Set the selected state to positive |
| negative | boolean | false | Set the selected state to negative |
Built from react-library-starter. Check it out for an easy way to turn a React component into a NPM package!
- Teddy Ni
This project is licensed under the MIT License - see the LICENSE file for details.