https://github.com/samypesse/react-nps-input

React component to prompt the NPS score
https://github.com/samypesse/react-nps-input

marketing nps react

Last synced: 7 months ago
JSON representation

React component to prompt the NPS score

• Host: GitHub
• URL: https://github.com/samypesse/react-nps-input
• Owner: SamyPesse
• License: apache-2.0
• Created: 2017-02-25T17:12:27.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-02-12T00:20:17.000Z (over 6 years ago)
• Last Synced: 2025-03-02T05:34:38.491Z (7 months ago)
• Topics: marketing, nps, react
• Language: JavaScript
• Homepage: https://samypesse.github.io/react-nps-input/
• Size: 407 KB
• Stars: 23
• Watchers: 2
• Forks: 11
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-nps-input

[![Build Status](https://travis-ci.org/SamyPesse/react-nps-input.svg?branch=master)](https://travis-ci.org/SamyPesse/react-nps-input)

[![NPM version](https://badge.fury.io/js/react-nps-input.svg)](http://badge.fury.io/js/react-nps-input)

A lightweight React component for gathering Net Promoter Score surveys. [See demo](http://samypesse.github.io/react-nps-input/).

### Installation

```

$ npm install react-nps-input --save

```

### Usage

```js

const React = require('react');

const NPSInput = require('react-nps-input');

const MyApp = React.createClass({

    onSubmit({ score }) {

        console.log(`Score for current user is ${score}/10`);

    },

    render() {

        return (

            


                {({ score }) => {

                    if (score >= 9) {

                        return 
Awesome thank you!
;

                    } else {

                        return 
Oh :(
;

                    }

                }}

            

        );

    }

})

```


### Props

- `[Function] onSubmit`: function to call when the user clicked on a score

- `[Function] onDismissed`: function to call when the user clicked to dismiss the form

- `[String] service` (Optional): name of the service for the introduction message

- `[Boolean] animated` (Optional): show animation for apparition (default is `true`)