The official NPM module for embedding the Userback.io widget into your React application.
npm i @userback/react
or yarn add @userback/react
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(
return (
<React.StrictMode>
<UserbackProvider token={USERBACK_TOKEN}>
<App />
</UserbackProvider>
</React.StrictMode>
)
)
With a valid token provided, the Userback Widget will automatically load and be ready to use!
Along with token
, you can also provide an options
prop:
const {email, name} = getUserDetails()
const ubOptions = { email, name, priority: 'high', autohide: true }
return (
<UserbackProvider token={USERBACK_TOKEN} options={ubOptions} >
<App />
</UserbackProvider>)
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
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