Nervous Parrot Muttering

    react-slack-feedback

    2.1.1 • Public • Published

    React Slack Feedback

    View live demo

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

    Build Status XO code style

    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
    1. Install the node modules
    yarn
    1. 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

    Install

    npm i react-slack-feedback

    DownloadsWeekly Downloads

    1,610

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    147 kB

    Total Files

    9

    Last publish

    Collaborators

    • markmur