{"id":35038417,"url":"https://github.com/bruceharrison1984/imagekit-react-hook","last_synced_at":"2025-12-27T08:06:26.625Z","repository":{"id":50547938,"uuid":"519395966","full_name":"bruceharrison1984/imagekit-react-hook","owner":"bruceharrison1984","description":"Hook wrapper for ImageKit.io client-side SDK","archived":false,"fork":false,"pushed_at":"2022-08-02T19:22:09.000Z","size":172,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-30T10:00:47.527Z","etag":null,"topics":["hook","imagekit","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"rosdec/rollingup","license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bruceharrison1984.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-30T02:08:45.000Z","updated_at":"2024-09-13T20:11:44.000Z","dependencies_parsed_at":"2022-09-19T05:12:35.808Z","dependency_job_id":null,"html_url":"https://github.com/bruceharrison1984/imagekit-react-hook","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/bruceharrison1984/imagekit-react-hook","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bruceharrison1984%2Fimagekit-react-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bruceharrison1984%2Fimagekit-react-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bruceharrison1984%2Fimagekit-react-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bruceharrison1984%2Fimagekit-react-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bruceharrison1984","download_url":"https://codeload.github.com/bruceharrison1984/imagekit-react-hook/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bruceharrison1984%2Fimagekit-react-hook/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28075746,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-27T02:00:05.897Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hook","imagekit","react"],"created_at":"2025-12-27T08:06:11.524Z","updated_at":"2025-12-27T08:06:26.620Z","avatar_url":"https://github.com/bruceharrison1984.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# imagekit-react-hook\n\n[![npm](https://img.shields.io/npm/v/imagekit-react-hook?color=orange)](https://www.npmjs.com/package/imagekit-react-hook)\n\nThis is a simple hook wrapper around the ImageKit.io javascript library. It allows for easy usage of client-side uploads,\nas well as generating signed URLs for private images.\n\nThis is a straight-forward, non-opinionated wrapper, so [the original\nImageKit.io documentation](https://github.com/imagekit-developer/imagekit-javascript) should be referred to for method usage.\n\n## Usage\n\nTo use, simply wrap the components you wish to use the `useImageKit` hook with the included `ImageKitProvider`. You must provide the\n`urlEndpoint`, `authenticationEndpoint`, and `publicKey` properties.\n\nThis example uses NextJS and loads the settings from environment variables, but any framework based on React should be similar:\n\n```tsx\nimport { ImageKitProvider } from '@/providers/ImageKitProvider';\n\nconst PhotosPage = () =\u003e {\n  const [origin, setOrigin] = useState\u003cstring\u003e();\n\n  /* our authentication end point is on the same server */\n  useEffect(() =\u003e setOrigin(window.location.origin), []);\n\n  return (\n    \u003cImageKitProvider\n      urlEndpoint={process.env.NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT!}\n      authenticationEndpoint={`${origin}/api/auth/photo`}\n      publicKey={process.env.NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY}\n    \u003e\n      \u003cchild-components /\u003e\n    \u003c/ImageKitProvider\u003e\n  );\n};\n\nexport default PhotosPage;\n```\n\nChild components within `ImageKitProvider` can access the ImageKitContext via the `useImageKit` hook.\n\nThis example shows how you could upload a single profile image that a user selected via an `Input` element:\n\n```tsx\nimport { v4 as uuidV4 } from 'uuid';\nimport { useImageKit } from 'imagekit-react-hook';\n\nconst { upload, url } = useImageKit();\n\n/* attach to the onChange event of the input element */\nconst onChange = async (event: ChangeEvent\u003cHTMLInputElement\u003e) =\u003e {\n  if (!event.target.files)\n    throw new Error('File list is null after selecting a file!');\n\n  const profileImage = event.target.files[0];\n  const ext = profileImage.name.split('.').pop();\n\n  await upload({\n    file: profileImage,\n    /* we generate a random filename for ImageKit. You can pass through the original filename if you like */\n    fileName: [uuidV4(), ext].join('.'),\n    extensions: [\n      {\n        name: 'google-auto-tagging',\n        minConfidence: 90,\n        maxTags: 2,\n      },\n    ],\n  });\n};\n```\n\n## Upload Method\n\nThe `upload` method is for client-side image uploads. This _requires_ the `authenticationEndpoint` property also\nbeing set to an endpoint that conforms to the specification required.\n\nIt is up to you how and where you implement this endpoint, but ImageKit.io offers [this documentation](https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload#signature-generation-for-client-side-file-upload).\n\n## Hook Methods \u0026 Props\n\nThe following methods and properties are exposed via the `useImageKit` hook:\n\n| Method/Prop            | Type   | Description                                                                |\n| ---------------------- | ------ | -------------------------------------------------------------------------- |\n| upload                 | method | Used for client-side uploading of images (requires authenticationEndpoint) |\n| url                    | method | Generate signed ImageKit.io URLs                                           |\n| urlEndpoint            | string | The ImageKit.io endpoint that was passed into the ImageKitProvider         |\n| publicKey              | string | The ImageKit.io public key that was passed into the ImageKitProvider       |\n| authenticationEndpoint | string | The authentication endpoint that was passed into the ImageKitProvider      |\n| imageKitClient         | object | Raw ImageKit SDK client                                                    |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbruceharrison1984%2Fimagekit-react-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbruceharrison1984%2Fimagekit-react-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbruceharrison1984%2Fimagekit-react-hook/lists"}