@raralabs/web-feedback NPM

Helps in better and quicker user feedback for native web components, with ability to capture a screenshot with a single click and submitting feedback component for javascript projects.

Instillation

npm i @raralabs/web-feedback

Usages

import { Snipping } from '@raralabs/web-feedback';
import '@raralabs/web-feedback/dist/css/style.css'; // stylesheet

let snap = new Snipping({
  buttonLabel: 'Send Feedback',
  initialMarkMode: 'mark',
  fileName: 'feedbackScreenshot.png'
  /** other configs **/
});

/*
 * initialize on app start
 * it also return callback with screenshot data as
 * image : image as file type
 * base64Image: image as base64
 */
snap.init((data) => {
  const { image, base64Image } = data;
});

Configs

Common config you may want to specify include:

button : boolean - enable or disable floating snapper button
buttonLabel: string - text label for floating snapper button
initialMarkMode: enum 'mark' | 'censored' | 'text' - Initial mark mode for the snipper
buttonPostion: enum 'left' | 'right' | 'custom' - Position of floating snapper button
fileName: string - file name for the screenshot

For Custom buttonPosition

Use css below

.snipping__captureScreenshotContainer_custom {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 999;
  }

.snipping__captureScreenshotContainer_custom .snipping__captureScreenshotBtn {
      padding: 7px;
      border: 0;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      cursor: pointer;
      transform: rotateZ(-90deg) translateX(50%) translateY(3px);
      transform-origin: 100% 100%;
      background-color: $primary;
      color: white;
}