React components for Firebase, using render props
npm install react-firebase-renderprops```
yarn add react-firebase-renderprops
jsx harmony
config={firebaseConfig}
render={firebase => (
firebase={firebase}
path="blog/posts"
render={refBlogPosts => (
on
reference={refBlogPosts}
limitToLast={20}
render={posts => (
{posts && posts.map(post => {post.title} )}
)}
/>
)}
/>
)}
/>
`$3
#### Firebase
Initialize the Firebase JavaScript SDK.
`jsx harmony
config={{
apiKey: '...',
authDomain: '...',
databaseURL: '...',
storageBucket: '...'
}}
render={(firebase) => {}}
/>
`#### FirebaseAuthState
Check your firebase authentication state. Returns
false when not logged in, returns null while still initializing.`jsx harmony
firebase={firebase}
render={user => {}}
/>
`#### FirebaseSignInAnonymously
`jsx harmony
firebase={firebase}
render={user => {}}
/>
`#### FirebaseSignInCredentials
`jsx harmony
firebase={firebase}
email="john@doe.com"
password="john1234"
render={user => {}}
/>
`#### FirebaseSignInCustomToken
`jsx harmony
firebase={firebase}
token="..."
render={user => {}}
/>
`#### FirebaseSignOut
`jsx harmony
firebase={firebase}
render={(done) => {}}
/>
`#### FirebaseReference
Create a Firebase reference to a single path:
`jsx harmony
firebase={firebase}
path="blog/posts"
render={(postRef) => {})
/>
`
Or create multiple references using the paths props
`jsx harmony
firebase={firebase}
paths={['blog/posts', 'blog/tags']}
render={(postRef, tagRef) => {})
/>
`#### FirebaseReferenceActions
Push data to your reference. Render function has the push reference as parameter.
`jsx harmony
reference={reactionRef}
payload={{msg: '...'}}
render={(refPush) => {})
/>
`#### FirebaseQuery
Query a firebase reference. Possible options:
`jsx harmony
on // Listen to changes with on
once // Get data once without listening
reference={refBlogPosts} // Set reference
limitToLast={20} // Limited to the last specific number of children
orderByKey // Order by key
startAt={3} // Starting point for your query
toArray // Maps result object to array
wait // When true, query execution is on hold
render={posts => {)}
/>
` #### FirebaseStorage
Initializes
firebase.storage()`jsx harmony
firebase={firebase}
render={(storage) => {}}
/>
` #### FirebaseDownloadURL
Gets the download urls from files in the Firebas Storage. (
storage.ref(path).getDownloadURL())`jsx harmony
storage={storage}
path="path"
render={(url) => {}}
/>
``