https://github.com/raralabs/web-feedback
Web Feedback system Library
https://github.com/raralabs/web-feedback
javascript-library typescript
Last synced: about 1 year ago
JSON representation
Web Feedback system Library
- Host: GitHub
- URL: https://github.com/raralabs/web-feedback
- Owner: raralabs
- License: mit
- Created: 2022-03-31T14:37:02.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-05T06:36:57.000Z (almost 4 years ago)
- Last Synced: 2025-03-26T07:11:18.418Z (about 1 year ago)
- Topics: javascript-library, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@raralabs/web-feedback
- Size: 819 KB
- Stars: 24
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Web Feedback
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
```sh
npm i @raralabs/web-feedback
```
### Usages
```js
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
```css
.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;
}
```
# Contributing
Want to contribute? Please check the guidelines [Contributing.md](https://github.com/raralabs/web-feedback/blob/main/CONTRIBUTING.md). All PRs and issues are welcome.