Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-slack-feedback with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("styled-components/package.json"); // styled-components is a peer dependency. var reactSlackFeedback = require("react-slack-feedback")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-slack-feedback v2.1.0

React component for gathering user feedback to send to slack.

React Slack Feedback

View live demo

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

Build Status XO code style


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'

    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) => 
        .then(({ url }) => success(url))
    onSubmit={(payload, success, error) => 

function sendToServer(payload, success, error) {
  return fetch('/api/slack', {
    method: 'POST',
    body: JSON.stringify(payload)

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))


channelStringFor visual purposes - changing this value will not change the slack channel.
disabledBooleanfalseDisable the component entirely. Returns null. Can be used to disable the component on specific pages
errorTimeoutNumber8000 (8 seconds)
feedbackTypesArray<{ value: String, label: String }>See code
iconFunction() => <SlackIcon />
onImageUploadFunctionMethod that will be called with a file argument
onSubmitFunctionrequiredA JSON payload object will be returned when the user submits the form.
sentTimeoutNumber5000 (5 seconds)
themeObjectSee themes directory
translationsObjectSee translations file
userString"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

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:

  1. Clone the repo:
git clone
  1. Install the node modules
  1. Run the demo:

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free