Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/markmur/react-slack-feedback
Unofficial React component for gathering user feedback to send to slack.
https://github.com/markmur/react-slack-feedback
feedback react slack
Last synced: 3 months ago
JSON representation
Unofficial React component for gathering user feedback to send to slack.
- Host: GitHub
- URL: https://github.com/markmur/react-slack-feedback
- Owner: markmur
- License: mit
- Created: 2016-08-10T01:26:02.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T03:12:43.000Z (over 1 year ago)
- Last Synced: 2024-07-02T10:57:07.120Z (4 months ago)
- Topics: feedback, react, slack
- Language: JavaScript
- Homepage: https://markmur.github.io/react-slack-feedback/
- Size: 13.5 MB
- Stars: 80
- Watchers: 3
- Forks: 38
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Slack Feedback
[View live demo](https://markmur.github.io/react-slack-feedback/)
Customizable React component for gathering user feedback to send to slack.
[](https://travis-ci.org/markmur/react-slack-feedback)
[](https://github.com/xojs/xo)
### Usage
Install with `yarn` or `npm`:
```bash
yarn add react-slack-feedback styled-components
```
To use the component, import it and render in your app's global component,
or individual components (if you don't want it on every page).
> NOTE:
> Your Slack Webhook URL should _never_ be available on the front end.
> For this reason you must have a server which sends the request to slack.
> This component will produce the JSON object to send to Slack but it won't send
> the request for you.
```js
import SlackFeedback, { themes } from 'react-slack-feedback'
ReactDOM.render(
uploadImage(image)
.then(({ url }) => success(url))
.catch(error)
}
onSubmit={(payload, success, error) =>
sendToServer(payload)
.then(success)
.catch(error)
}
/>,
document.getElementById('root')
)
function sendToServer(payload, success, error) {
return fetch('/api/slack', {
method: 'POST',
body: JSON.stringify(payload)
})
.then(success)
.catch(error)
}
function uploadImage(image, success, error) {
var form = new FormData()
form.append('image', image)
return fetch('/api/upload', { method: 'POST', data: form })
.then(({ url }) => success(url))
.catch(err => error(err))
)
}
```
### Props
| Prop | Type | Default | Required | Description |
| ------------------- | ----------------------------------------- | --------------------- | :------: | ---------------------------------------------------------------------------------------------------- |
| channel | `String` | | | For visual purposes - changing this value will *not* change the slack channel. |
| defaultSelectedType | `String` | | |
| disabled | `Boolean` | false | | Disable the component entirely. Returns null. Can be used to disable the component on specific pages |
| errorTimeout | `Number` | 8000 (8 seconds) | | |
| feedbackTypes | `Array<{ value: String, label: String }>` | See code | | |
| icon | `Function` | `() => ` | | |
| onClose | `Function` | | |
| onImageUpload | `Function` | | | Method that will be called with a file argument |
| onOpen | `Function` | | |
| onSubmit | `Function` | | required | A JSON payload object will be returned when the user submits the form. |
| sentTimeout | `Number` | 5000 (5 seconds) | | |
| showChannel | `Boolean` | true | |
| showIcon | `Boolean` | true | |
| theme | `Object` | See themes directory | |
| translations | `Object` | See translations file | |
| user | `String` | "Unknown User" | | The logged in user's name (if applicable) |
> NOTE:
> All slack channels are lowercase. The string should be identical to the channel name e.g '#feedback'
### Callback Functions
| Function | Arguments | Description |
| ------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| onSubmit | `(payload: Object, success: Function, error: Function)` | Called when the user hits send. Use the `success` callback to indicate that the request was successful. Use the `error` callback to indicate failure. |
| onImageUpload | `(image: Object, success: Function, error: Function)` | Called when an image has been uploaded. |
---
## Contributing
### Running Locally
To run this module locally:
1. Clone the repo:
```bash
git clone https://github.com/markmur/react-slack-feedback.git
```
2. Install the node modules
```bash
yarn
```
3. Run the demo:
```.env
WEBHOOK_URL='YOUR_SLACK_WEBHOOK_URL' yarn start
```
This will bundle the client with `parcel` and startup a simple `express` server.
The server will be listening on http://localhost:8080
The client will be listening on http://localhost:1234
Open http://localhost:1234 to view the demo