react-feedback-popup
Version:
A highly customizable React component to get user feedback via a popup
196 lines (154 loc) • 7.77 kB
Markdown
[](https://github.com/ya332/react-feedback-popup/blob/master/LICENSE.md)
[](https://www.npmjs.com/package/react-feedback-popup)
[](https://www.npmjs.com/package/react-feedback-popup)
[](https://travis-ci.org/ya332/react-feedback-popup)
[](https://github.com/prettier/prettier)
<a href="https://codeclimate.com/github/ya332/react-feedback-popup/maintainability"><img src="https://api.codeclimate.com/v1/badges/7e7b23995232a5224e2e/maintainability" /></a>
[](https://github.com/ya332/react-feedback-popup/blob/master/CONTRIBUTING.md)
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and [this React Feedback Component](https://www.npmjs.com/package/react-feedback)
React-Feedback-Popup is a blazingly fast and highly customizable component to get user feedback.
Collapsed Feedback Popup:
<img src="./assets/collapsed_tag.png" alt="Demo tag">
Expanded Feedback Popup:
<img src="./assets/expanded_tag.png" alt="Demo tag">
[](https://stackblitz.com/edit/react-feedback-popup)
- Gets user name, email, rating.
- User can determine the position (left or right)
- User can determine the header, body, and button text as well as the number of star ratings.
- Form validation (name, email, feedback and rating are required)
### Why
I needed a "feedback component" for my [projects](http://ya332.github.io#projects). Since I was unable to find one which met my requirements (and the fact that I generally enjoy re-inventing the wheel) this is what I came up with.
### Demo
### Installation
The preferred way of using the component is via NPM
```
npm install --save react-feedback-popup
```
### Usage
Here's a sample implementation that creates a custom popup on a dummy Create-React-App page.
```javascript
import React from 'react';
import logo from './logo.svg';
import FeedBack from 'react-feedback-popup';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<FeedBack
style={{zIndex:'2', marginLeft:'20px', position:'fixed'}}
position="left"
numberOfStars={5}
headerText="Hello"
bodyText="Custom Body test"
buttonText="This is also custom"
handleClose={() => console.log("handleclose")}
handleSubmit={(data) =>
fetch('xxxxxx', {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
method: 'POST', // or 'PUT'
body: JSON.stringify(data),
}).then((response) => {
if (!response.ok) {
return Promise.reject('Our servers are having issues! We couldn\'t send your feedback!');
}
response.json()
}).then(() => {
alert('Success!');
}).catch((error) => {
alert('Our servers are having issues! We couldn\'t send your feedback!', error);
})
}
handleButtonClick={() => console.log("handleButtonClick")}
/>
</div>
);
}
export default App;
```
As you can see, the fetch address is xxxxxx. Here, you can provide a URL to send your POST request, so that the form can be submitted to this link. There are 3rd party tools like formspree.io, email.js, mailchimp, Amazon Lambda functions etc to send emails once you get the user data via this React Popup.
<a name="Options"></a>
| Option | Type | Default | Description |
| ------------------------------------- | -------- | ----------------------- | -------------------------------------------------------------- |
| [`position`](
| [`numberOfStars`](
| [`headerText`](
| [`bodyText`](
| [`buttonText`](
| [`handleClose`](
| [`handleSubmit`](
| [`handleButtonClick`](
Sample Usage:
```js
<FeedBack
style={{zIndex:'2', marginLeft:'20px', position:'fixed'}}
position="left"
numberOfStars={5}
headerText="Hello"
bodyText="Custom Body test"
buttonText="This is also custom"
handleClose={() => console.log("handleclose")}
handleSubmit={(data) =>
fetch('https://formspree.io/xxxxxx', {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
method: 'POST', // or 'PUT'
body: JSON.stringify(data),
}).then((response) => {
if (!response.ok) {
return Promise.reject('Our servers are having issues! We couldn\'t send your feedback!');
}
response.json()
}).then(() => {
alert('Success!');
}).catch((error) => {
alert('Our servers are having issues! We couldn\'t send your feedback!', error);
})
}
handleButtonClick={() => console.log("handleButtonClick")}
/>
```
style is a props to the Form component. You can overwrite the default values via passing CSS attributes.
For example,
```js
style={{zIndex:'2', marginLeft:'20px', position:'fixed'}}
```
The component is written in ES6 and uses [Webpack](http://webpack.github.io/) as its build tool.
```
git clone git@github.com:ya332/react-feedback-popup.git
cd react-feedback-popup
npm install
npm run start
```
open [http://localhost:3000](http://localhost:3000)
Got ideas on how to make this better? Open an issue [here!](https://github.com/ya332/react-feedback-popup/issues/new)
Issues, Pull Requests and all Comments are welcome!
[]: https://github.com/ya332/react-feedback-popup/blob/v4.0.1/lib/MadeBy.js#L83
[]: https://github.com/mathiasbynens/String.prototype.includes