{"_id":"@cargenie/cargenie-react","name":"@cargenie/cargenie-react","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@cargenie/cargenie-react","version":"0.1.0","description":"React component for embedding the CarGenie widget. It recommends the best vehicle from your inventory to shoppers.","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"build":"vite build && tsc -p tsconfig.build.json","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=18 <20","react-dom":">=18 <20"},"devDependencies":{"@types/react":"^18.3.0 || ^19.0.0","@types/react-dom":"^18.3.0 || ^19.0.0","react":"^19.0.0","react-dom":"^19.0.0","@types/node":"^26.1.1","@vitejs/plugin-react":"^4.3.4","typescript":"^5.6.3","vite":"^5.4.14"},"keywords":["cargenie","react","widget","car","dealership","recommendations"],"author":{"name":"CarGenie"},"license":"MIT","_id":"@cargenie/cargenie-react@0.1.0","gitHead":"54e69861a3d86ad621d0ee81ceca30a6768c4f17","_nodeVersion":"20.19.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-hG5V09RDqWIQ3xOcHjPQngetdg9aSw6IqdTZ/rk0ntN/h0Y/DhsrA5L8Hb+R17rmPphy4U1hM3bYShHmjSPXpw==","shasum":"fba9ef2adbe5f76a0c3dcc328c87c0838de05981","tarball":"https://registry.npmjs.org/@cargenie/cargenie-react/-/cargenie-react-0.1.0.tgz","fileCount":6,"unpackedSize":8083,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDU37K0D/u9o0o2A9FWms14hwfCDbq62RkXqBskHnzRgAiEA8mpzY98qNRcvzR8nmdcMa6bJF09qH4//qeqHcRXEKoA="}]},"_npmUser":{"name":"cargenie-kevin","email":"kevin@cargenie.co"},"directories":{},"maintainers":[{"name":"coreycg","email":"hello@cargenie.co"},{"name":"cargenie-kevin","email":"kevin@cargenie.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cargenie-react_0.1.0_1785252919886_0.46019449408811264"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-28T15:35:19.701Z","0.1.0":"2026-07-28T15:35:20.016Z","modified":"2026-07-28T15:35:20.285Z"},"maintainers":[{"name":"coreycg","email":"hello@cargenie.co"},{"name":"cargenie-kevin","email":"kevin@cargenie.co"}],"description":"React component for embedding the CarGenie widget. It recommends the best vehicle from your inventory to shoppers.","keywords":["cargenie","react","widget","car","dealership","recommendations"],"author":{"name":"CarGenie"},"license":"MIT","readme":"# CarGenie React Widget\n\nReact component for embedding the CarGenie widget. It recommends the best vehicle from your inventory to shoppers.\n\n## Installation\n```bash\nnpm install @cargenie/cargenie-react\n```\n\n## Usage\n\nPass your dealership identifier with the required `dealerId` prop. CarGenie uses this value to load your specific inventory.\n\n```tsx\nimport { CarGenie } from \"@cargenie/cargenie-react\";\n\nexport function App() {\n  return <CarGenie dealerId=\"your-dealer-id\" />;\n}\n```\n\nReplace `\"your-dealer-id\"` with the dealer ID provided by CarGenie.\n\n## Next.js usage\n\nIf you are using the App Router, render CarGenie from a client component:\n\n```tsx\n\"use client\";\n\nimport { CarGenie } from \"@cargenie/cargenie-react\";\n\nexport function CarGenieWidget() {\n  return <CarGenie dealerId=\"your-dealer-id\" />;\n}\n```\n\n## Custom root ID\n\nUse a custom `rootId` if you need to render more than one CarGenie widget on the same page, or if you want to control the generated container ID.\n\n```tsx\nimport { CarGenie } from \"@cargenie/cargenie-react\";\n\nexport function App() {\n  return <CarGenie dealerId=\"your-dealer-id\" rootId=\"cargenie-main\" />;\n}\n```\n\nFor multiple widgets, each `rootId` should be unique:\n\n```tsx\nimport { CarGenie } from \"@cargenie/cargenie-react\";\n\nexport function App() {\n  return (\n    <>\n      <CarGenie dealerId=\"your-dealer-id\" rootId=\"cargenie-hero\" />\n      <CarGenie dealerId=\"your-dealer-id\" rootId=\"cargenie-fullscreen\" />\n    </>\n  );\n}\n```\n\n## Custom styling\n\nBy default, CarGenie applies inline container styles for height, rounded corners, and overflow handling:\n\n```tsx\nimport { CarGenie } from \"@cargenie/cargenie-react\";\n\nexport function App() {\n  return <CarGenie dealerId=\"your-dealer-id\" />;\n}\n```\n\nYou can pass a `style` prop to customize the container while keeping the default styles. Your styles are merged with the \ndefaults. Note that if you pass a height that is too small (generally less than 650 px), the component \nwill not render properly.\n\n```tsx\nimport { CarGenie } from \"@cargenie/cargenie-react\";\n\nexport function App() {\n  return (\n    <CarGenie\n      dealerId=\"your-dealer-id\"\n      style={{\n        maxWidth: \"650px\",\n        height: \"650px\",\n        borderRadius: \"16px\",\n      }}\n    />\n  );\n}\n```\n\nPass a `className` if you prefer to control the widget container with CSS classes, such as Tailwind CSS.\n\n```tsx\nimport { CarGenie } from \"@cargenie/cargenie-react\";\n\nexport function App() {\n  return (\n    <CarGenie\n      dealerId=\"your-dealer-id\"\n      className=\"max-w-[650px] h-[650px] overflow-hidden rounded-xl\"\n    />\n  );\n}\n```\n\nWhen `className` is provided, the default inline container styles are not applied automatically. Make sure your class includes a height and any needed overflow styling.\nIf you pass both `className` and `style`, the `style` prop is still applied, but it is not merged with the default styles.\n\nIf you are not using Tailwind CSS, you can pass your own CSS class:\n\n```tsx\nimport { CarGenie } from \"@cargenie/cargenie-react\";\nimport \"./App.css\";\n\nexport function App() {\n  return <CarGenie dealerId=\"your-dealer-id\" className=\"cargenie-widget\" />;\n}\n```\n\n```css\n.cargenie-widget {\n  max-width: 650px;\n  height: 650px;\n  overflow: hidden;\n  border-radius: 12px;\n}\n```\n\n## Props\n\n| Prop        | Type            | Default                                                                                                                | Description                                                                                                                               |\n|-------------|-----------------|------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------|\n| `dealerId`  | `string`        | Required                                                                                                               | The dealer identifier passed to the CarGenie embed script.                                                                                |\n| `rootId`    | `string`        | `\"cargenie\"`                                                                                                           | The ID of the container element where the CarGenie widget is mounted. Use a unique value for each widget on the same page.                |\n| `className` | `string`        | `undefined`                                                                                                            | CSS classes applied to the widget container. When provided, the built-in default container styles are not applied automatically.          |\n| `style`     | `CSSProperties` | `{ overflow: \"hidden\", borderRadius: \"0.75rem\", maxWidth: \"650px\", height: \"650px\" }` when `className` is not provided | Inline styles applied to the widget container. If `className` is not provided, these styles are merged with the default container styles. |\n\n## Notes\n\n- If your app uses server-side rendering, render this component only on the client.\n- Make sure each widget on the same page has a unique `rootId`.\n- The container needs a large enough height, around 650 px, to display properly.\n- A good starting point for the max width is 650 px\n","readmeFilename":"README.md","_rev":"1-b04b02df2ab2303fed314a03fdf3a608"}