react-simple-user-feedback

React Simple User Feedback

The library that makes gathering user feedback simple

Resources

• Github
• Full Documentation and Examples
• NPM Page

Installation

To add to your React app,

npm install react-simple-user-feedback

or with Yarn,

yarn add react-simple-user-feedback

Usage

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>
        );
    }
}

API

Binary Feedback

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

Contributors

Built from react-library-starter. Check it out for an easy way to turn a React component into a NPM package!

Authors:

• Teddy Ni

License

This project is licensed under the MIT License - see the LICENSE file for details.