{"_id":"@googleworkspace/drive-picker-react","_rev":"4-217c8be6ebee46758a1e1965a9a4bfe6","name":"@googleworkspace/drive-picker-react","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.1":{"name":"@googleworkspace/drive-picker-react","version":"0.1.1","keywords":["google","drive","picker","react","drive-picker"],"author":{"url":"https://justin.poehnelt.com","name":"Justin Poehnelt","email":"jpoehnelt@google.com"},"license":"Apache-2.0","_id":"@googleworkspace/drive-picker-react@0.1.1","maintainers":[{"name":"google-wombot","email":"node-team-npm+wombot@google.com"},{"name":"jpoehnelt","email":"justin.poehnelt@gmail.com"}],"homepage":"https://github.com/googleworkspace/drive-picker-element","bugs":{"url":"https://github.com/googleworkspace/drive-picker-element/issues"},"dist":{"shasum":"5d303b7fed6c6088330fbb7c9874dd06ab2561a7","tarball":"https://registry.npmjs.org/@googleworkspace/drive-picker-react/-/drive-picker-react-0.1.1.tgz","fileCount":14,"integrity":"sha512-ienO3jiHc9Zpyr+jmvO5bf4o4INqNbXOLsXAicy1CNfVvdU5YuI2XuaLzFvtrbsx/kWapRVrs51lid0xH3ysLA==","signatures":[{"sig":"MEUCIFasWolXdroELc8oIBzLo11ZvK5GBiMs+AJHESPcM3z9AiEAjYtUbn3iB5FHzN7PeJ0ySWeq3G0QVliVijZOieuSlo8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@googleworkspace%2fdrive-picker-react@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":36679},"main":"./dist/index.js","type":"module","_from":"file:googleworkspace-drive-picker-react-0.1.1.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"test":"vitest","build":"tsup src/index.ts --format esm --dts","check":"tsc --noEmit"},"_npmUser":{"name":"jpoehnelt","email":"justin.poehnelt@gmail.com"},"_resolved":"/tmp/c26431307bae3f9880ac8e25deb62c7d/googleworkspace-drive-picker-react-0.1.1.tgz","_integrity":"sha512-ienO3jiHc9Zpyr+jmvO5bf4o4INqNbXOLsXAicy1CNfVvdU5YuI2XuaLzFvtrbsx/kWapRVrs51lid0xH3ysLA==","repository":{"url":"git+https://github.com/googleworkspace/drive-picker-element.git","type":"git"},"_npmVersion":"10.8.2","description":"React wrapper for Google Drive Picker Element","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@googleworkspace/drive-picker-element":"0.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","jsdom":"^27.2.0","react":"^18.2.0","vitest":"^4.0.10","react-dom":"^18.2.0","typescript":"latest","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitest/coverage-v8":"^4.0.10","@testing-library/react":"^16.3.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/drive-picker-react_0.1.1_1763581346694_0.6452112491761333","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@googleworkspace/drive-picker-react","version":"0.1.2","keywords":["google","drive","picker","react","drive-picker"],"author":{"url":"https://justin.poehnelt.com","name":"Justin Poehnelt","email":"jpoehnelt@google.com"},"license":"Apache-2.0","_id":"@googleworkspace/drive-picker-react@0.1.2","maintainers":[{"name":"google-wombot","email":"node-team-npm+wombot@google.com"},{"name":"jpoehnelt","email":"justin.poehnelt@gmail.com"}],"homepage":"https://github.com/googleworkspace/drive-picker-element","bugs":{"url":"https://github.com/googleworkspace/drive-picker-element/issues"},"dist":{"shasum":"b2e59f0c94fe998fc8e552adb9e3d2298e633d37","tarball":"https://registry.npmjs.org/@googleworkspace/drive-picker-react/-/drive-picker-react-0.1.2.tgz","fileCount":14,"integrity":"sha512-lddVMULCubPDErvArwm/62v8oH3gxkw2Y5PzRugTG0tKjWVGLVPodfhQ9/ku8yjAq+6RP+G/1rPAsV6V9ibYgQ==","signatures":[{"sig":"MEYCIQDP/nLAo96JvriL/JRPOpY2O0PhhRcWOBZ4jBpKClcQpgIhAMNYBDkwbGobFmeKj4cl5UpQQZYz1QYL6ZToSjqZpldY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@googleworkspace%2fdrive-picker-react@0.1.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":36790},"main":"./dist/index.js","type":"module","_from":"file:googleworkspace-drive-picker-react-0.1.2.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"test":"vitest","build":"tsup src/index.ts --format esm --dts","check":"tsc --noEmit"},"_npmUser":{"name":"jpoehnelt","email":"justin.poehnelt@gmail.com"},"_resolved":"/tmp/0139b38d0808cc5505872d5a5bb6288d/googleworkspace-drive-picker-react-0.1.2.tgz","_integrity":"sha512-lddVMULCubPDErvArwm/62v8oH3gxkw2Y5PzRugTG0tKjWVGLVPodfhQ9/ku8yjAq+6RP+G/1rPAsV6V9ibYgQ==","repository":{"url":"git+https://github.com/googleworkspace/drive-picker-element.git","type":"git"},"_npmVersion":"10.8.2","description":"React wrapper for Google Drive Picker Element","directories":{},"_nodeVersion":"20.19.5","dependencies":{"@googleworkspace/drive-picker-element":"0.7.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","jsdom":"^27.2.0","react":"^18.2.0","vitest":"^4.0.10","react-dom":"^18.2.0","typescript":"latest","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitest/coverage-v8":"^4.0.10","@testing-library/react":"^16.3.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/drive-picker-react_0.1.2_1764617679165_0.24078864894544938","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@googleworkspace/drive-picker-react","version":"0.1.3","keywords":["google","drive","picker","react","drive-picker"],"author":{"url":"https://justin.poehnelt.com","name":"Justin Poehnelt","email":"jpoehnelt@google.com"},"license":"Apache-2.0","_id":"@googleworkspace/drive-picker-react@0.1.3","maintainers":[{"name":"google-wombot","email":"node-team-npm+wombot@google.com"},{"name":"jpoehnelt","email":"justin.poehnelt@gmail.com"}],"homepage":"https://github.com/googleworkspace/drive-picker-element","bugs":{"url":"https://github.com/googleworkspace/drive-picker-element/issues"},"dist":{"shasum":"d047be1e5681aad6c74e13f188eeb8b431266cef","tarball":"https://registry.npmjs.org/@googleworkspace/drive-picker-react/-/drive-picker-react-0.1.3.tgz","fileCount":14,"integrity":"sha512-kciQcJvNFmOPhR+XSD7GqhJ5iW4pTLG1bYbhI273HSobBj1FA3IBH95j9q/pjKbllLAjErvIzI75Y5b35IEvNA==","signatures":[{"sig":"MEQCIDH8t1uXKhfnu+4q3p9O3jNBitdV3g0lnUDnIZwc6KqaAiBUWHD4M4ZUl57L2nmEh41Xcw99PxWmdTumsh2jvp/0Gw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@googleworkspace%2fdrive-picker-react@0.1.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":36967},"main":"./dist/index.js","type":"module","_from":"file:googleworkspace-drive-picker-react-0.1.3.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"test":"vitest","build":"tsup src/index.ts --format esm --dts","check":"tsc --noEmit"},"_npmUser":{"name":"jpoehnelt","email":"justin.poehnelt@gmail.com"},"_resolved":"/tmp/6acbe1c2c8f0ecf4a93e910c5fd5505b/googleworkspace-drive-picker-react-0.1.3.tgz","_integrity":"sha512-kciQcJvNFmOPhR+XSD7GqhJ5iW4pTLG1bYbhI273HSobBj1FA3IBH95j9q/pjKbllLAjErvIzI75Y5b35IEvNA==","repository":{"url":"git+https://github.com/googleworkspace/drive-picker-element.git","type":"git"},"_npmVersion":"10.8.2","description":"React wrapper for Google Drive Picker Element","directories":{},"_nodeVersion":"20.19.6","dependencies":{"@googleworkspace/drive-picker-element":"0.7.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","jsdom":"^27.2.0","react":"^18.2.0","vitest":"^4.0.10","react-dom":"^18.2.0","typescript":"latest","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitest/coverage-v8":"^4.0.10","@testing-library/react":"^16.3.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/drive-picker-react_0.1.3_1764874209255_0.771440730888213","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@googleworkspace/drive-picker-react","version":"0.2.0","description":"React wrapper for Google Drive Picker Element","license":"Apache-2.0","author":{"name":"Justin Poehnelt","email":"jpoehnelt@google.com","url":"https://justin.poehnelt.com"},"keywords":["google","drive","picker","react","drive-picker"],"homepage":"https://github.com/googleworkspace/drive-picker-element","repository":{"type":"git","url":"git+https://github.com/googleworkspace/drive-picker-element.git"},"type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./package.json":"./package.json"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"dependencies":{"@googleworkspace/drive-picker-element":"0.7.3"},"devDependencies":{"@testing-library/react":"^16.3.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitest/coverage-v8":"^4.0.10","jsdom":"^27.2.0","react":"^18.2.0","react-dom":"^18.2.0","tsup":"^8.4.0","typescript":"latest","vitest":"^4.0.10"},"publishConfig":{"access":"public"},"scripts":{"build":"tsup src/index.ts --format esm --dts","check":"tsc --noEmit","test":"vitest"},"_id":"@googleworkspace/drive-picker-react@0.2.0","bugs":{"url":"https://github.com/googleworkspace/drive-picker-element/issues"},"_integrity":"sha512-3CIEZ7U+HDKd8UoXG3l/fPSZFhxajC3MYNIqAZQSba2totuYKVTQMOJsgonO7OnnJq88YD35n7whCF4i5QUyvA==","_resolved":"/tmp/d0e460ad1f082e5e6ddee303999dc8a7/googleworkspace-drive-picker-react-0.2.0.tgz","_from":"file:googleworkspace-drive-picker-react-0.2.0.tgz","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-3CIEZ7U+HDKd8UoXG3l/fPSZFhxajC3MYNIqAZQSba2totuYKVTQMOJsgonO7OnnJq88YD35n7whCF4i5QUyvA==","shasum":"806688a7a88ab365c65e3e9ff74b6e2f97c3727a","tarball":"https://registry.npmjs.org/@googleworkspace/drive-picker-react/-/drive-picker-react-0.2.0.tgz","fileCount":14,"unpackedSize":38252,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@googleworkspace%2fdrive-picker-react@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDUg7LgQeTGAtZkx8bcaWV50N2QQk2cXmVMfNI0iShrBAIhANxqGTvnEhmoyrgPTbP/Hl5WtualL7xftuBKEHFdvZu9"}]},"_npmUser":{"name":"jpoehnelt","email":"justin.poehnelt@gmail.com"},"directories":{},"maintainers":[{"name":"google-wombot","email":"node-team-npm+wombot@google.com"},{"name":"jpoehnelt","email":"justin.poehnelt@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/drive-picker-react_0.2.0_1765299944244_0.6951442167965867"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-19T19:42:26.625Z","modified":"2025-12-09T17:05:44.897Z","0.1.1":"2025-11-19T19:42:26.892Z","0.1.2":"2025-12-01T19:34:39.356Z","0.1.3":"2025-12-04T18:50:09.410Z","0.2.0":"2025-12-09T17:05:44.394Z"},"bugs":{"url":"https://github.com/googleworkspace/drive-picker-element/issues"},"author":{"name":"Justin Poehnelt","email":"jpoehnelt@google.com","url":"https://justin.poehnelt.com"},"license":"Apache-2.0","homepage":"https://github.com/googleworkspace/drive-picker-element","keywords":["google","drive","picker","react","drive-picker"],"repository":{"type":"git","url":"git+https://github.com/googleworkspace/drive-picker-element.git"},"description":"React wrapper for Google Drive Picker Element","maintainers":[{"name":"google-wombot","email":"node-team-npm+wombot@google.com"},{"name":"jpoehnelt","email":"justin.poehnelt@gmail.com"}],"readme":"[![npm](https://img.shields.io/npm/v/@googleworkspace/drive-picker-react)](https://www.npmjs.com/package/@googleworkspace/drive-picker-react)\n[![Test](https://github.com/googleworkspace/drive-picker-element/actions/workflows/test.yml/badge.svg)](https://github.com/googleworkspace/drive-picker-element/actions/workflows/test.yml)\n![Release](https://github.com/googleworkspace/drive-picker-element/workflows/Release/badge.svg)\n\n## Description\n\nThis package provides a React wrapper for the [`@googleworkspace/drive-picker-element`](https://github.com/googleworkspace/drive-picker-element/tree/main/packages/drive-picker-element) web component.\n\nIt offers a seamless way to integrate the [Google Picker API](https://developers.google.com/drive/picker/guides/overview) into your React applications.\n\n## Usage\n\nTo use the `DrivePicker` component in your project, import it and use it in your component. See the full [examples](https://github.com/googleworkspace/drive-picker-element/tree/main/examples) for more information\n\n```tsx\nimport {\n  DrivePicker,\n  DrivePickerDocsView,\n} from \"@googleworkspace/drive-picker-react\";\n\nfunction App() {\n  return (\n    <DrivePicker\n      clientId=\"YOUR_CLIENT_ID\"\n      appId=\"YOUR_APP_ID\"\n      onPicked={(e) => console.log(\"Picked:\", e.detail)}\n      onCanceled={() => console.log(\"Picker was canceled\")}\n    >\n      <DrivePickerDocsView starred={true} />\n    </DrivePicker>\n  );\n}\n```\n\nThe underlying web component, `@googleworkspace/drive-picker-element`, must be imported for the components to work. The `@googleworkspace/drive-picker-react` package automatically handles this for you.\n\n## Component Props\n\nThe `DrivePicker` and `DrivePickerDocsView` components accept props that correspond to the attributes of the underlying web components.\n\nFor a full list of available props, please refer to the documentation for the web components:\n\n- [`<drive-picker>` attributes](https://github.com/googleworkspace/drive-picker-element/tree/main/packages/drive-picker-element#attributes)\n- [`<drive-picker-docs-view>` attributes](https://github.com/googleworkspace/drive-picker-element/tree/main/packages/drive-picker-element#drive-picker-docs-view)\n\n## Events\n\nYou can handle events by passing `on...` props to the `DrivePicker` component.\n\nThe available event handlers are:\n\n- `onPicked`\n- `onCanceled`\n- `onOauthError`\n- `onOauthResponse`\n\nThe event argument is a `CustomEvent` where the `detail` property contains the payload from the Google Picker API.\n\n```tsx\n<DrivePicker\n  ...\n  onPicked={(e) => {\n    const data = e.detail;\n    console.log(data.docs); // Array of picked documents\n  }}\n/>\n```\n\nFor more details on the event payloads, see the [Event Details section of the `@googleworkspace/drive-picker-element` README](https://github.com/googleworkspace/drive-picker-element/tree/main/packages/drive-picker-element#event-details).\n\n## Reference\n\nThis component is a wrapper. For detailed information about the underlying web component's attributes, events, and slots, please refer to the [`@googleworkspace/drive-picker-element` README](https://github.com/googleworkspace/drive-picker-element/tree/main/packages/drive-picker-element).\n\n## Server-Side Rendering (SSR)\n\nThis component is designed to work in client-side environments only, as it relies on browser-specific APIs (like `customElements`).\n\nThe component includes the `\"use client\"` directive, which makes it compatible with React Server Components (RSC) in frameworks like Next.js.\n\nHowever, if you encounter issues with SSR or prefer to be explicit, you can use dynamic imports to disable SSR for this component.\n\n### Next.js Example\n\nUsing `next/dynamic`:\n\n```tsx\nimport dynamic from 'next/dynamic';\n\nconst DrivePicker = dynamic(\n  () => import('@googleworkspace/drive-picker-react').then((mod) => mod.DrivePicker),\n  { ssr: false }\n);\n\nconst DrivePickerDocsView = dynamic(\n  () => import('@googleworkspace/drive-picker-react').then((mod) => mod.DrivePickerDocsView),\n  { ssr: false }\n);\n\nfunction App() {\n  return (\n    <DrivePicker ...>\n      <DrivePickerDocsView ... />\n    </DrivePicker>\n  );\n}\n```\n","readmeFilename":"README.md"}