Widget
React
Use the Lumifeed React component in your React app.
React
Installation
npm install @lumifeed/reactBasic usage
import { LumifeedWidget } from "@lumifeed/react"
export default function App() {
return (
<>
<YourApp />
<LumifeedWidget apiKey={process.env.NEXT_PUBLIC_LUMIFEED_KEY} />
</>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
apiKey | string | — | Required. Your project API key |
position | string | bottom-right | Button position |
theme | string | auto | light, dark, or auto |
label | string | Feedback | Button label |
primaryColor | string | #7c6af4 | Accent color |
user | object | — | User identification object |
onSubmit | function | — | Callback after successful submission |
With user identification
import { LumifeedWidget } from "@lumifeed/react"
import { useUser } from "./hooks/useUser"
export default function Layout({ children }) {
const user = useUser()
return (
<>
{children}
<LumifeedWidget
apiKey={process.env.NEXT_PUBLIC_LUMIFEED_KEY}
user={
user
? { userId: user.id, name: user.name, email: user.email }
: undefined
}
onSubmit={(feedback) => {
console.log("Submitted:", feedback.id)
}}
/>
</>
)
}Programmatic control
import { useLumifeed } from "@lumifeed/react"
function TriggerButton() {
const { open } = useLumifeed()
return <button onClick={open}>Give feedback</button>
}