{"id":15546890,"url":"https://github.com/emekankwo/react_image_with_auth","last_synced_at":"2026-01-15T22:48:36.398Z","repository":{"id":250112192,"uuid":"833523429","full_name":"EmekaNkwo/react_image_with_auth","owner":"EmekaNkwo","description":"An NPM Package for React component or displaying images with authorization token or headers","archived":false,"fork":false,"pushed_at":"2024-07-31T23:34:00.000Z","size":32,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-06T08:37:56.347Z","etag":null,"topics":["headers","npm","npm-package","react","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-image-with-auth","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EmekaNkwo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-25T08:22:43.000Z","updated_at":"2025-01-06T11:18:56.000Z","dependencies_parsed_at":"2024-10-21T20:22:26.026Z","dependency_job_id":null,"html_url":"https://github.com/EmekaNkwo/react_image_with_auth","commit_stats":{"total_commits":32,"total_committers":1,"mean_commits":32.0,"dds":0.0,"last_synced_commit":"7c0a94409c27909e3822f49b5e20fef54fcd276e"},"previous_names":["emekankwo/react_image_with_auth"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmekaNkwo%2Freact_image_with_auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmekaNkwo%2Freact_image_with_auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmekaNkwo%2Freact_image_with_auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmekaNkwo%2Freact_image_with_auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EmekaNkwo","download_url":"https://codeload.github.com/EmekaNkwo/react_image_with_auth/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246905830,"owners_count":20852818,"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","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":["headers","npm","npm-package","react","reactjs"],"created_at":"2024-10-02T13:05:15.024Z","updated_at":"2026-01-15T22:48:36.357Z","avatar_url":"https://github.com/EmekaNkwo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Image-With-Auth\n\nA React component for displaying images with an authorization token in the request headers. This component is designed to be flexible and adaptable to various use cases, allowing the token to be provided via props or cookies.\n\n## Features\n\n- **Authorization Token**: Securely fetch images using an authorization token.\n- **Placeholder and Fallback Images**: Display a placeholder while loading and a fallback image on error.\n- **Error Handling**: Provides error state handling to manage image load failures.\n- **Customization**: Supports custom alt text, styling, and class names.\n- **Accessibility**: Ensures better accessibility with alt text and supports additional attributes.\n\n## Installation\n\nTo install the component, use npm or yarn:\n\n```bash\nnpm install react-image-with-auth\n```\n\nOr with yarn:\n\n```bash\nyarn add react-image-with-auth\n```\n\n## Usage\n\nBasic Usage with Token from Cookie\n\nThis example demonstrates fetching an image using a token stored in cookies.\n\n```tsx\nimport React from \"react\";\nimport ImageWithToken from \"react-image-with-auth\";\n\nconst App = () =\u003e {\n  const imageUrl = \"https://example.com/secure-image.jpg\";\n\n  return (\n    \u003cdiv\u003e\n      \u003cImageWithToken\n        imageUrl={imageUrl}\n        alt=\"Secure Image\"\n        placeholder=\"https://example.com/placeholder.jpg\"\n        fallback=\"https://example.com/fallback.jpg\"\n        className=\"custom-class\"\n        style={{ borderRadius: \"8px\", objectFit: \"cover\" }}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\nUsing Custom Headers\n\nYou can also provide custom headers, which will be merged with the Authorization token if present.\n\n```tsx\nimport React from \"react\";\nimport ImageWithToken from \"react-image-with-auth\";\n\nconst App = () =\u003e {\n  const imageUrl = \"https://example.com/secure-image.jpg\";\n  const headers = {\n    \"Custom-Header\": \"custom-value\",\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cImageWithToken\n        imageUrl={imageUrl}\n        headers={headers}\n        alt=\"Secure Image with Custom Headers\"\n        placeholder=\"https://example.com/placeholder.jpg\"\n        fallback=\"https://example.com/fallback.jpg\"\n        className=\"custom-class\"\n        style={{ borderRadius: \"8px\", objectFit: \"cover\" }}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\nUsing Token via Props\n\nIf the token is not available in cookies or you want to provide it directly, you can pass it via props.\n\n```tsx\nimport React from \"react\";\nimport ImageWithToken from \"react-image-with-auth\";\n\nconst App = () =\u003e {\n  const imageUrl = \"https://example.com/secure-image.jpg\";\n  const token = \"your-access-token-here\";\n\n  return (\n    \u003cdiv\u003e\n      \u003cImageWithToken\n        imageUrl={imageUrl}\n        token={token}\n        alt=\"Secure Image with Prop Token\"\n        placeholder=\"https://example.com/placeholder.jpg\"\n        fallback=\"https://example.com/fallback.jpg\"\n        className=\"custom-class\"\n        style={{ borderRadius: \"8px\", objectFit: \"cover\" }}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n### Props\n\n- `imageUrl` (string, required): The URL of the image to display.\n- `token` (string, optional): Authorization token to include in the request headers. If not provided, the component will try to use a token from cookies.\n- `headers` (HeadersInit, optional): Custom headers object, array of tuples, or Headers instance.\n- `alt` (string, optional): Alt text for the image. Defaults to \"Image\".\n- `placeholder` (string, optional): URL of a placeholder image to display while loading.\n- `fallback` (string, optional): URL of a fallback image to display on error.\n- `className` (string, optional): CSS class for custom styling.\n- `style` (React.CSSProperties, optional): Inline styles for the image.\n- `onClick` (React.MouseEventHandler\u003cHTMLImageElement\u003e, optional): Callback function to handle image click events.\n\n## Development\n\n### Prerequisites\n\n- Node.js\n- npm or yarn\n\n### Setup\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/EmekaNkwo/react_image_with_auth.git\n   cd react_image_with_auth\n   ```\n\n2. Install dependencies:\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n\n### Building\n\nTo build the project, run:\n\n```bash\nnpm run build\n```\n\n## Contributing\n\nContributions are welcome! Please open an issue or submit a pull request with your improvements.\n\n## License\n\nThis project is licensed under the MIT License.\n\n## Acknowledgements\n\n- [js-cookie](https://github.com/js-cookie/js-cookie)\n- [react](https://github.com/facebook/react)\n\n---\n\n## Thank you for using React-Image-With-Auth!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femekankwo%2Freact_image_with_auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femekankwo%2Freact_image_with_auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femekankwo%2Freact_image_with_auth/lists"}