react-meteor-hooks-forks
v0.3.3
Published
React Hooks for Meteor.
Downloads
3
Maintainers
Readme
react-meteor-hooks ☄️
GETTING REBUILT RN - since hooks have changed... Please use react-meteor-data
React Hooks for Meteor. It was never easier to integrate React into the Meteor stack.
Usage
First install Tracker meteor add tracker
Just import the hooks you need from this module and you are ready to use Meteors reactive data in React. All Meteor computations from the hooks are stopped automatically when the component is removed from the DOM.
import React from 'react'
import { useCurrentUser } from 'react-meteor-hooks'
const UserWidget = () => {
const currentUser = useCurrentUser()
return(
<div>
{ currentUser ? <p>{ currentUser.userName }</p> : <p>You are not logged in.</p> }
</div>
)
}
Available Hooks
useTracker( Function: trackerFun [, Array: deps] ) : trackerFunResult
Runs a function inside Tracker.autorun
and can return reactive data.
import React from 'react'
import { useTracker } from 'react-meteor-hooks'
const UserBooks = (sortBy) => {
const data = useTracker(() => {
const userProfile = Meteor.user().profile
const userBooks = Books.find({ _owner: Meteor.userId() }, { sort: { [sortBy]: -1 }})
return { userProfile, userBooks }
}, [sortBy])
// pass [sortBy] as second arg - so that this function will be rerun if sortBy changes
const books = data.userBooks.map(Book)
// ...
}
useSubscription( String: subscriptionName [, ...subscriptionParams] ) : Boolean
Subscribes to a publication and returns a reactive "loading" var.
import React from 'react'
import { useSubscription } from 'react-meteor-hooks'
const UserBooks = (sortBy, showLimit) => {
const loading = useSubscription('user_books', showLimit)
// subscription will be rerun if showLimit changes
if (loading) {
// ...
}
// ...
}
useMethod( String: methodName [, {transform}] ) : Object
Returns { isLoading, data, error, call }
object to work with meteor methods.
Full example including useEffect
at https://codesandbox.io/s/kj9zqqyrr
import React from 'react'
import { useMethod } from 'react-meteor-hooks'
const UserBooks = () => {
const { isLoading, data, error, call } = useMethod('add_book', { transform: result => result.updatedAt = new Date() })
if (isLoading) return 'Adding book...'
if (error) return `Error: ${err.message}`
return (
<div>
<button
onClick={async () => {
await call('Moby Dick')
console.log('Meteor call completed')
}}
>
Add
</button>
{data && (
<p>New book added at {data.updatedAt.toLocalString()}. ID: {data.id}</p>
)}
</div>
)
}
export default UserBooks
useMongoFetch( MeteorCursor: cursor [, Array: deps] ) : Array | Object
Fetches a MeteorCursor and returns the result.
import React from 'react'
import { useMongoFetch, useSubscription } from 'react-meteor-hooks'
const UserBooks = (sortBy, showLimit) => {
const loading = useSubscription('user_books', showLimit)
if (loading) {
// ...
} else {
const allBooks = useMongoFetch(Books.find({}, { sort: { [sortBy] : -1 }}), [sortBy])
const books = allBooks.map(/* ... */)
// ...
}
}
useCurrentUser() : Object | null
Returns the current logged in User or null.
import React from 'react'
import { useCurrentUser, useSubscription } from 'react-meteor-hooks'
const UserBooks = (sortBy, showLimit) => {
const user = useCurrentUser()
if (user) {
const loading = useSubscription('user_books', showLimit)
if (loading) {
// ...
} else {
// ...
}
}
}
useSession(String: sessionName) : result | undefined
Returns value of a Session var.
import React from 'react'
import { useSession } from 'react-meteor-hooks'
Session.set('currentPage', 1)
const UserBooks = (sortBy, showLimit) => {
const page = useSession('currentPage')
// ...
}
Note
This package was inspired by a blog post of ARTHUR ANDERSEN. Go check out his blog!