{"id":13630733,"url":"https://github.com/markmur/react-slack-feedback","last_synced_at":"2025-07-18T13:33:29.599Z","repository":{"id":41342347,"uuid":"65340126","full_name":"markmur/react-slack-feedback","owner":"markmur","description":"Unofficial React component for gathering user feedback to send to slack.","archived":false,"fork":false,"pushed_at":"2023-03-04T03:12:43.000Z","size":14166,"stargazers_count":80,"open_issues_count":8,"forks_count":38,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-24T06:16:42.895Z","etag":null,"topics":["feedback","react","slack"],"latest_commit_sha":null,"homepage":"https://markmur.github.io/react-slack-feedback/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markmur.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-08-10T01:26:02.000Z","updated_at":"2024-02-26T01:59:23.000Z","dependencies_parsed_at":"2024-01-14T09:00:45.741Z","dependency_job_id":null,"html_url":"https://github.com/markmur/react-slack-feedback","commit_stats":{"total_commits":139,"total_committers":13,"mean_commits":"10.692307692307692","dds":0.5827338129496402,"last_synced_commit":"282b3a27a8ab9ee86d07759961c7aa80a095e237"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/markmur/react-slack-feedback","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmur%2Freact-slack-feedback","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmur%2Freact-slack-feedback/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmur%2Freact-slack-feedback/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmur%2Freact-slack-feedback/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markmur","download_url":"https://codeload.github.com/markmur/react-slack-feedback/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmur%2Freact-slack-feedback/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265768636,"owners_count":23825153,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["feedback","react","slack"],"created_at":"2024-08-01T22:01:57.822Z","updated_at":"2025-07-18T13:33:29.337Z","avatar_url":"https://github.com/markmur.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Slack Feedback\n\n[View live demo](https://markmur.github.io/react-slack-feedback/)\n\nCustomizable React component for gathering user feedback to send to slack.\n\n\u003cp align=\"left\"\u003e\n  \u003cimg src=\"https://github.com/markmur/react-slack-feedback/raw/master/images/dark.png?raw=true\" width=\"300\" /\u003e\n  \u003cimg src=\"https://github.com/markmur/react-slack-feedback/raw/master/images/light.png?raw=true\" width=\"300\" /\u003e\n\u003c/p\u003e\n\n[![Build Status](https://travis-ci.org/markmur/react-slack-feedback.svg?branch=master)](https://travis-ci.org/markmur/react-slack-feedback)\n[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/xojs/xo)\n\n### Usage\n\nInstall with `yarn` or `npm`:\n\n```bash\nyarn add react-slack-feedback styled-components\n```\n\nTo use the component, import it and render in your app's global component,\nor individual components (if you don't want it on every page).\n\n\u003e NOTE:\n\u003e Your Slack Webhook URL should _never_ be available on the front end.\n\u003e For this reason you must have a server which sends the request to slack.\n\u003e This component will produce the JSON object to send to Slack but it won't send\n\u003e the request for you.\n\n```js\nimport SlackFeedback, { themes } from 'react-slack-feedback'\n\nReactDOM.render(\n  \u003cSlackFeedback\n    channel=\"#general\"\n    theme={themes.dark} // (optional) See src/themes/default for default theme\n    user=\"Slack Feedback\" // The logged in user (default = \"Unknown User\")\n    onImageUpload={(image, success,error) =\u003e \n      uploadImage(image)\n        .then(({ url }) =\u003e success(url))\n        .catch(error)\n    }\n    onSubmit={(payload, success, error) =\u003e \n      sendToServer(payload)\n        .then(success)\n        .catch(error)\n     }\n  /\u003e,\n  document.getElementById('root')\n)\n\nfunction sendToServer(payload, success, error) {\n  return fetch('/api/slack', {\n    method: 'POST',\n    body: JSON.stringify(payload)\n  })\n  .then(success)\n  .catch(error)\n}\n\nfunction uploadImage(image, success, error) {\n  var form = new FormData()\n  form.append('image', image)\n\n  return fetch('/api/upload', { method: 'POST', data: form })\n    .then(({ url }) =\u003e success(url))\n    .catch(err =\u003e error(err))\n  )\n}\n```\n\n### Props\n\n| Prop                | Type                                      | Default               | Required | Description                                                                                          |\n| ------------------- | ----------------------------------------- | --------------------- | :------: | ---------------------------------------------------------------------------------------------------- |\n| channel             | `String`                                  |                       |          | For visual purposes - changing this value will *not* change the slack channel.    |\n| defaultSelectedType | `String`                                  |                       |          |\n| disabled            | `Boolean`                                 | false                 |          | Disable the component entirely. Returns null. Can be used to disable the component on specific pages |\n| errorTimeout        | `Number`                                  | 8000 (8 seconds)      |          |                                                                                                      |\n| feedbackTypes       | `Array\u003c{ value: String, label: String }\u003e` | See code              |          |                                                                                                      |\n| icon                | `Function`                                | `() =\u003e \u003cSlackIcon /\u003e` |          |                                                                                                      |\n| onClose             | `Function`                                |                       |          |\n| onImageUpload       | `Function`                                |                       |          | Method that will be called with a file argument                                                      |\n| onOpen              | `Function`                                |                       |          |\n| onSubmit            | `Function`                                |                       | required | A JSON payload object will be returned when the user submits the form.                               |\n| sentTimeout         | `Number`                                  | 5000 (5 seconds)      |          |                                                                                                      |\n| showChannel         | `Boolean`                                 | true                  |          |\n| showIcon            | `Boolean`                                 | true                  |          |\n| theme               | `Object`                                  | See themes directory  |          |\n| translations        | `Object`                                  | See translations file |          |\n| user                | `String`                                  | \"Unknown User\"        |          | The logged in user's name (if applicable)                                                            |\n\n\u003e NOTE:\n\u003e All slack channels are lowercase. The string should be identical to the channel name e.g '#feedback'\n\n### Callback Functions\n\n| Function      | Arguments                                               | Description                                                                                                                                           |\n| ------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 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. |\n| onImageUpload | `(image: Object, success: Function, error: Function)`   | Called when an image has been uploaded.                                                                                                               |\n\n---\n\n## Contributing\n\n### Running Locally\n\nTo run this module locally:\n\n1.  Clone the repo:\n\n```bash\ngit clone https://github.com/markmur/react-slack-feedback.git\n```\n\n2.  Install the node modules\n\n```bash\nyarn\n```\n\n3.  Run the demo:\n\n```.env\nWEBHOOK_URL='YOUR_SLACK_WEBHOOK_URL' yarn start\n```\n\nThis will bundle the client with `parcel` and startup a simple `express` server.\n\nThe server will be listening on http://localhost:8080\n\nThe client will be listening on http://localhost:1234\n\nOpen http://localhost:1234 to view the demo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmur%2Freact-slack-feedback","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkmur%2Freact-slack-feedback","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmur%2Freact-slack-feedback/lists"}