Go to Help Centre

React SDK

Suggest Edits

Overview

The official NPM module for embedding the Userback Widget into your React application.

Official NPM Package

https://www.npmjs.com/package/@userback/react

Official Github Repository

https://github.com/userback/widget-js/tree/develop/widget-react

Installation

📘

Userback Widget Token

You will need your Userback Widget Token, you can get your project-specific Userback Widget Token from Widget Customiser.

We've got 2 options, utilizing NPM or Yarn in the code example below.

npm i @userback/react

yarn add @userback/react

Quickstart

The easiest way to get started with Userback is to simply use the Provider near the top of your React Tree like so:

import { UserbackProvider } from '@userback/react'

ReactDOM.createRoot(document.getElementById('root')).render(
  return (
    <React.StrictMode>
      <UserbackProvider token={USERBACK_TOKEN}>
        <App />
      </UserbackProvider>
    </React.StrictMode>)
)

Options

Along with token, you can also provide an options prop:

const {email, name} = getUserDetails()
return (
  <UserbackProvider token={USERBACK_TOKEN} options={{ email, name, priority: 'high' }} >
    ...
  </UserbackProvider>)

Hooks

You can access Userback hooks in child components of the <UserbackProvider> with useUserback():

import { useUserback } from '@userback/react'

function App() {
  const { open, hide } = useUserback()
  return (
    <div id="app">
      <button type="button" onClick={() => open('general', 'screenshot')}>Take a screenshot</button>
      <button type="button" onClick={() => hide()}>Hide me :(</button>
    </div>
  )
}

export default App

Class based components

If you are using class based components and need an alternative to hooks, you can use the withUserback Higher Order Component:

import { withUserback } from '@userback/react'

class App extends React.Component {
  render() {
    return (
      <div id="app">
        <button type="button" onClick={() => this.props.userback.open('general', 'screenshot')}>Take a screenshot</button>
        <button type="button" onClick={() => this.props.userback.hide()}>Hide me :(</button>
      </div>
    )
  }
}

export default withUserback(App)

For more information about available configuration settings and and functions available, see our JavaScript API

Updated 9 months ago