{"id":14384913,"url":"https://github.com/sprmn/react-firebase-storage-connector","last_synced_at":"2025-09-17T23:39:55.359Z","repository":{"id":65372941,"uuid":"72434741","full_name":"sprmn/react-firebase-storage-connector","owner":"sprmn","description":"Connect any component to give it a firebase download url as prop","archived":false,"fork":false,"pushed_at":"2016-11-03T23:30:53.000Z","size":14,"stargazers_count":8,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-28T11:41:31.552Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/sprmn.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}},"created_at":"2016-10-31T12:35:25.000Z","updated_at":"2019-04-08T01:27:54.000Z","dependencies_parsed_at":"2023-01-19T23:35:17.561Z","dependency_job_id":null,"html_url":"https://github.com/sprmn/react-firebase-storage-connector","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sprmn/react-firebase-storage-connector","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sprmn%2Freact-firebase-storage-connector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sprmn%2Freact-firebase-storage-connector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sprmn%2Freact-firebase-storage-connector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sprmn%2Freact-firebase-storage-connector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sprmn","download_url":"https://codeload.github.com/sprmn/react-firebase-storage-connector/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sprmn%2Freact-firebase-storage-connector/sbom","scorecard":{"id":842599,"data":{"date":"2025-08-11","repo":{"name":"github.com/sprmn/react-firebase-storage-connector","commit":"a7127d65224e83ab7b555be0d328a9007cc91668"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/13 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-23T20:48:36.569Z","repository_id":65372941,"created_at":"2025-08-23T20:48:36.570Z","updated_at":"2025-08-23T20:48:36.570Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275685090,"owners_count":25509527,"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-09-17T02:00:09.119Z","response_time":84,"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":[],"created_at":"2024-08-28T18:01:46.501Z","updated_at":"2025-09-17T23:39:55.289Z","avatar_url":"https://github.com/sprmn.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-firebase-storage-connector\nGives a cached download URL of a firebase storage reference as a prop to your components.\nWorks on React and React Native.\n\n## Prerequisites\nMake sure you have initialized firebase somewhere in your app using:\n``` javascript\nimport firebase from 'firebase';\n\nconst config = {\n  apiKey: \"\u003cAPI_KEY\u003e\",\n  authDomain: \"\u003cPROJECT_ID\u003e.firebaseapp.com\",\n  databaseURL: \"https://\u003cDATABASE_NAME\u003e.firebaseio.com\",\n  storageBucket: \"\u003cBUCKET\u003e.appspot.com\",\n};\nfirebase.initializeApp(config);\n```\n\n##### Note for React Native:\nIn order to cache Firebase images in React Native, make sure to configure `cacheControl` in the metadata of the images as explained [here](https://firebase.google.com/docs/storage/web/file-metadata).\n\n## API\n\n### `connect(mapStorageToProps)(Component)`\nConnect a component to a cached firebase storage URL. In case of a simple image it is probably easier to use the `\u003cImageFromStorage /\u003e` component.\n\n#### Example\n``` javascript\nimport React from 'react';\nimport firebase from 'firebase';\nimport { connect } from 'react-firebase-storage-connector';\n\ntype Props = {\n  imageName?: string, // The name of the image that is used to obtain a download url from the storage\n  imageURL?: string // The url that is obtained using the connector\n  children?: any\n};\n\nconst ContainerWithBackgroundImage = (props: Props) =\u003e (\n  \u003cdiv style={{background: `url(${props.imageURL})`}}\u003e\n    {props.children}\n  \u003c/div\u003e\n);\n\n// Define a function that maps a storage reference to a prop\nconst mapStorageToProps = (props: Props) =\u003e ({\n  imageURL: props.imageName \u0026\u0026 firebase.storage().ref('images').child(props.imageName)\n});\n\n// Export the connected component\nexport default connect(mapStorageToProps)(ContainerWithBackgroundImage);\n```\n\n### `\u003cImageFromStorage /\u003e`\nA component that takes a `storageRef` and renders an image with the cached download URL obtained from this storage reference.\n\n#### Props\n- `storageRef` (required) - A reference to a Firebase storage image.\n- `as` (optional) - A component to render instead of the `\u003cimg\u003e` component. This component will receive the URL via its `src` prop.\n\nAll other props will be passed on to the `\u003cimg\u003e` component.\n\n#### Example\n``` javascript\nimport React from 'react';\nimport firebase from 'firebase';\nimport { ImageFromStorage } from 'react-firebase-storage-connector';\n\ntype Props = {\n  username?: string, // The username, will be used as alt prop\n  imageName?: string // The name of the image that is used to obtain a download url from the storage\n};\n\nconst ProfilePicture = (props: Props) =\u003e (\n  \u003cImageFromStorage\n    storageRef={props.imageName \u0026\u0026 firebase.storage().ref('images').child(props.imageName)}\n    alt={props.username}\n  /\u003e\n);\n\n// Export the connected component\nexport default ProfilePicture;\n```\n\n## Explanation\nAfter the component is mounted, a download URL will be requested from firebase using the storage reference.\nThis download URL can be used for example to download images from firebase.\nThe URL will be cached using the full path of the firebase storage reference,\ntherefore each subsequent call will obtain the download URL from the cache before the first render of the connected component.\nHence the image will be rendered immediately.\n\n## Questions\nIf you have any question at all, please open an [issue](https://github.com/sprmn/react-firebase-storage-connector/issues/new).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsprmn%2Freact-firebase-storage-connector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsprmn%2Freact-firebase-storage-connector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsprmn%2Freact-firebase-storage-connector/lists"}