Package Exports

react-slack-feedback

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-slack-feedback) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Slack Feedback

React component for gathering user feedback to send to slack.

Usage

Install with yarn or npm:

# npm
npm install react-slack-feedback

# yarn
yarn add react-slack-feedback

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.

import SlackFeedback from 'react-slack-feedback'

ReactDOM.render(
  <SlackFeedback
    channel="#general"
    user="Slack Feedback" // The logged in user (default = "Unknown User")
    onImageUpload={(image, success,error) => uploadImage(image).then(success).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`			The Slack channel to send messages. The default webhook channel will be used if none is provided.
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`	`() => <SlackIcon />`
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.

Running Locally

To run this module locally:

Clone the repo:

git clone https://github.com/markmur/react-slack-feedback.git

Install the node modules

yarn

Create a ENV file with your WEBHOOK_URL

.env

WEBHOOK_URL='YOUR_SLACK_WEBHOOK_URL'

Run the demo:

yarn start

This will bundle the client with parcel and startup a simple express server.