@userback/react

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

Installation

npm i @userback/react or yarn add @userback/react

Quickstart

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

import { UserbackProvider } from '@userback/react';

ReactDOM.createRoot(document.getElementById('root')).render(
  <UserbackProvider token="**USERBACK_TOKEN**">
    <App />
  </UserbackProvider>
);

With a valid token provided, the Userback Widget will automatically load and be ready to use!

Options

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

import { UserbackProvider } from '@userback/react';

// identify your logged-in users (optional)
const user_data = {
    id: "123456", // example data
    info: {
      name: "someone", // example data
      email: "[e-mail]" // example data
    }
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <UserbackProvider token="**USERBACK_TOKEN**" options={{user_data: user_data}}>
    <App />
  </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, show } = useUserback()
  return (
    <div id="app">
      <button type="button" onClick={() => open('general', 'screenshot')}>Take a screenshot</button>
      <button type="button" onClick={show}>Show Userback</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