Docs · SDK · React (Create React App)

Install Brevwick in React (Create React App).

Copy-paste the snippets below. Replace pk_test_demo with the public key from your project — find it under Project settings → Keys.

1. Install

Install the adapter alongside the core SDK.

npm install @tatlacas/brevwick-react @tatlacas/brevwick-sdk modern-screenshot

2. Configure env vars

Wire the project key through your framework’s env convention so it gets inlined into the client bundle at build time.

# Public project key. CRA only inlines `REACT_APP_*` env vars from `.env*` files at build time.
REACT_APP_BREVWICK_PROJECT_KEY=pk_test_demo

3. Wire the SDK

src/index.tsxTSX

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrevwickProvider, FeedbackButton } from '@tatlacas/brevwick-react';
import App from './App';

const config = {
  projectKey: process.env.REACT_APP_BREVWICK_PROJECT_KEY ?? 'pk_test_demo',
};

const container = document.getElementById('root');
if (container) {
  createRoot(container).render(
    <React.StrictMode>
      <BrevwickProvider config={config}>
        <App />
        <FeedbackButton position="bottom-right" />
      </BrevwickProvider>
    </React.StrictMode>,
  );
}

Verify

Run `npm start` and open http://localhost:3000.
Click the floating feedback button.
Submit a test issue.
Confirm the issue lands in /app/issues.

Full guide: /docs/sdk/react-cra

Published packages

Browse the registry for version history, source, and download counts.