React Slack Feedback

View live demo

Customizable React component for gathering user feedback to send to slack.

Usage

Install with yarn or npm:

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.

import SlackFeedback, { themes } from 'react-slack-feedback'

ReactDOM.render(
  <SlackFeedback
    channel="#general"
    theme={themes.dark} // (optional) See src/themes/default for default theme
    user="Slack Feedback" // The logged in user (default = "Unknown User")
    onImageUpload={(image, success,error) => 
      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	() => <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.

---

Contributing

Running Locally

To run this module locally:

1. Clone the repo:

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

2. Install the node modules

yarn

3. Run the demo:

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