https://github.com/sprmn/react-firebase-storage-connector

Connect any component to give it a firebase download url as prop
https://github.com/sprmn/react-firebase-storage-connector

Last synced: 2 months ago
JSON representation

Connect any component to give it a firebase download url as prop

• Host: GitHub
• URL: https://github.com/sprmn/react-firebase-storage-connector
• Owner: sprmn
• Created: 2016-10-31T12:35:25.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-11-03T23:30:53.000Z (about 8 years ago)
• Last Synced: 2024-10-11T04:33:49.466Z (2 months ago)
• Language: JavaScript
• Size: 13.7 KB
• Stars: 8
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-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 `cacheControl` in the metadata of the images as explained [here](https://firebase.google.com/docs/storage/web/file-metadata).

## API

### `connect(mapStorageToProps)(Component)`

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) => (

  


    {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);

```

### ``

A component that takes a `storageRef` 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) => (

  

);

// 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](https://github.com/sprmn/react-firebase-storage-connector/issues/new).