nps-popup-library

Net Promoter Score

nps-popup-library project is the frontend popup for capturing user's feedback and scores for your product. We have used typescript , react and ant design to create a library which can we used as the component in your project.. Please Follow this quick guide for how to use and setup the project.

Objective

The objectives of the project is to provide a react component which can be included in the project and we can capture user's score and comments easily.

Installing

• NPM Install

npm install nps-popup-library

Example

• Import in page

import {NPSPopup} from 'nps-popup-library';
This can be used for the projects using Ant-Design as styling framework.

import {NPSPopupModal} from 'nps-popup-library';

This can be used for the projects not using Ant-Design. It is developed using simple styles

• Passing Props to the library

  <NPSPopup
  title= 'Net Promoter Score' // NPS title
  onSubmit={onSubmit} // submit method
  scoreSuccessText={"Thank you for the score !!"} //Success message after score is submitted.
  lowScoreText={"Not likely to recommend"}//Text for display low score label.
  highScoreText={"Extremely likely to recommend"}//Text for display high score label.
  scoreTitle={"How likely would you recommend product to your colleagues ?"}//Title for the score icon in the popup.
  commentsTitle={"Any Other Feedback ?"} /Title for the comments label.
  submitBtnText={"Submit"}//Text for the submit button.
/>

or

interface applicationItem {
  "userNpsResultId":string,
  "applicationName":string,
  "lastMonthLoginTimeCount"?:number,
}

  <NPSPopupModal
  width = {string | number}
  wrapClassName = {string}
  destroyOnClose = {boolean}
  destroyOnClose = {false} //Whether to close the component is destroyed
  visible={true} // Whether to show the popup
  applicationList={nameList} // Array<applicationItem> Platform data to comment
  title= 'Net Promoter Score' // NPS title
  scoreSuccessText={"Thank you for the score !!"} //Success message after score is submitted.
  lowScoreText={"Not likely to recommend"}//Text for display low score label.
  highScoreText={"Extremely likely to recommend"}//Text for display high score label.
  scoreTitle={"How likely would you recommend product to your colleagues ?"}//Title for the score icon in the popup.
  commentsTitle={"Tell us why are you not likely to recommend it ?"} /Title for the comments label.
  submitBtnText={"Submit"}//Text for the submit button.
  noCommentErrorText={"Please tell us your comment"}//Error reminder when submitting without commenting
  noScoreErrorText={"Please tell us your score"}//Error reminder when submitting without rating
  onSubmit={(params) => console.log(params)}// submit method
  onSuccess={() => {
      setVisible(false)
      //do something
  }}//success callback
  onClose={() => {
    setVisible(false)
    //do something
    }}//close callback
/>

• Submit method

const onSubmit = (score,comments) => {
   console.log(score,comments)
  };

1. score provided by the user
2. comments provided by the user