react-firebase-storage-connector
v1.1.0
Connect any component to give it a firebase download url as prop
0/weekUpdated 3 years agoMIT
Published by Frank van der Hoek
npm install react-firebase-storage-connectorreact-firebase-storage-connector
Gives a cached download URL of a firebase storage reference as a prop to your components.
Works on React and React Native.
Prerequisites
Make sure you have initialized firebase somewhere in your app using:
``
javascript
import firebase from 'firebase';const config = {
apiKey: "",
authDomain: ".firebaseapp.com",
databaseURL: "https://.firebaseio.com",
storageBucket: ".appspot.com",
};
firebase.initializeApp(config);
`##### Note for React Native:
In order to cache Firebase images in React Native, make sure to configure
in the metadata of the images as explained here.API
$3
Connect a component to a cached firebase storage URL. In case of a simple image it is probably easier to use the component.#### Example
` javascript
import React from 'react';
import firebase from 'firebase';
import { connect } from 'react-firebase-storage-connector';type Props = {
imageName?: string, // The name of the image that is used to obtain a download url from the storage
imageURL?: string // The url that is obtained using the connector
children?: any
};
const ContainerWithBackgroundImage = (props: Props) => (
url(${props.imageURL})}}>
{props.children}
);// Define a function that maps a storage reference to a prop
const mapStorageToProps = (props: Props) => ({
imageURL: props.imageName && firebase.storage().ref('images').child(props.imageName)
});
// Export the connected component
export default connect(mapStorageToProps)(ContainerWithBackgroundImage);
`$3
A component that takes a and renders an image with the cached download URL obtained from this storage reference.#### Props
-
storageRef (required) - A reference to a Firebase storage image.
- as (optional) - A component to render instead of the component. This component will receive the URL via its src prop.All other props will be passed on to the
component.#### Example
` javascript
import React from 'react';
import firebase from 'firebase';
import { ImageFromStorage } from 'react-firebase-storage-connector';type Props = {
username?: string, // The username, will be used as alt prop
imageName?: string // The name of the image that is used to obtain a download url from the storage
};
const ProfilePicture = (props: Props) => (
alt={props.username}
/>
);
// Export the connected component
export default ProfilePicture;
``Explanation
After the component is mounted, a download URL will be requested from firebase using the storage reference.
This download URL can be used for example to download images from firebase.
The URL will be cached using the full path of the firebase storage reference,
therefore each subsequent call will obtain the download URL from the cache before the first render of the connected component.
Hence the image will be rendered immediately.
Questions
If you have any question at all, please open an issue.