Skip to content

Commit

Permalink
Table of contents README
Browse files Browse the repository at this point in the history
  • Loading branch information
Théo mathieu committed Jun 12, 2016
1 parent 692dd9d commit bcc70eb
Showing 1 changed file with 77 additions and 27 deletions.
104 changes: 77 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,50 @@
# react-native-meteor [![react-native-meteor](http://img.shields.io/npm/dm/react-native-meteor.svg)](https://www.npmjs.org/package/react-native-meteor) [![npm version](https://badge.fury.io/js/react-native-meteor.svg)](http://badge.fury.io/js/react-native-meteor) [![Dependency Status](https://david-dm.org/inProgress-team/react-native-meteor.svg)](https://david-dm.org/inProgress-team/react-native-meteor)

Meteor-like methods for React Native.

## UPDATE NOTE
# react-native-meteor
[![react-native-meteor](http://img.shields.io/npm/dm/react-native-meteor.svg)](https://www.npmjs.org/package/react-native-meteor) [![npm version](https://badge.fury.io/js/react-native-meteor.svg)](http://badge.fury.io/js/react-native-meteor) [![Dependency Status](https://david-dm.org/inProgress-team/react-native-meteor.svg)](https://david-dm.org/inProgress-team/react-native-meteor)

Meteor-like methods for React Native.

* Since RN 0.26.0 you have to use ws or wss protocol. http is not working on Android.
<!-- TOC depthFrom:1 depthTo:6 withLinks:1 updateOnSave:1 orderedList:0 -->

- [react-native-meteor](#react-native-meteor)
- [Compatibility notes](#compatibility-notes)
- [What is it for ?](#what-is-it-for-)
- [Install](#install)
- [Example usage](#example-usage)
- [Connect your components](#connect-your-components)
- [createContainer](#createcontainer)
- [Example](#example)
- [connectMeteor && getMeteorData](#connectmeteor-getmeteordata)
- [Example](#example)
- [Reactive variables](#reactive-variables)
- [Additionals collection methods](#additionals-collection-methods)
- [ListView Components](#listview-components)
- [MeteorListView Component](#meteorlistview-component)
- [Example usage](#example-usage)
- [MeteorComplexListView Component](#meteorcomplexlistview-component)
- [Example usage](#example-usage)
- [API](#api)
- [Meteor DDP connection](#meteor-ddp-connection)
- [Meteor.connect(endpoint, options)](#meteorconnectendpoint-options)
- [Meteor.disconnect()](#meteordisconnect)
- [Meteor methods](#meteor-methods)
- [Availables packages](#availables-packages)
- [Convenience packages](#convenience-packages)
- [Meteor.Accounts](#meteoraccounts)
- [FSCollection](#fscollection)
- [Meteor.ddp](#meteorddp)
- [How To ?](#how-to-)
- [react-native-router-flux](#react-native-router-flux)
- [Author](#author)
- [Want to help ?](#want-to-help-)

<!-- /TOC -->


## Compatibility notes

* Since RN 0.26.0 you have to use ws or wss protocol to connect to your meteor server. http is not working on Android.

## What is it for ?

Expand All @@ -13,6 +53,8 @@ The purpose of this library is :
* be fully compatible with react-native and help react-native developers.
* **to match with [Meteor documentation](http://docs.meteor.com/) used with React.**



## Install

npm i --save react-native-meteor@latest
Expand Down Expand Up @@ -64,11 +106,15 @@ export default createContainer(params=>{
}, App)
```

# createContainer
# Connect your components

[Since Meteor 1.3, createContainer is the recommended way to populate your React Components](http://guide.meteor.com/v1.3/react.html#using-createContainer).

[Since Meteor 1.3, createContainer is the recommended way to populate your React Components](http://guide.meteor.com/v1.3/react.html#using-createContainer). Very similar to getMeteorData but your separate container components from presentational components.
## createContainer

## Example
Very similar to getMeteorData but your separate container components from presentational components.

### Example

```javascript
import Meteor, { createContainer } from 'react-native-meteor';
Expand All @@ -90,11 +136,11 @@ export default createContainer(params=>{
}, Orders)
```

# connectMeteor && getMeteorData
## connectMeteor && getMeteorData

connectMeteor is a React Mixin which enables getMeteorData (the old way of populating meteor data into your components).

## Example
### Example

```javascript
import Meteor, { connectMeteor } from 'react-native-meteor';
Expand Down Expand Up @@ -150,8 +196,8 @@ These methods (except update) work offline. That means that elements are correct
* [.update(id, modifier, [options], [callback])](http://docs.meteor.com/#/full/update)
* [.remove(id, callback(err, countRemoved))](http://docs.meteor.com/#/full/remove)


# MeteorListView Component
# ListView Components
## MeteorListView Component

Same as [ListView](https://facebook.github.io/react-native/docs/listview.html) Component but does not need dataSource and accepts three arguments :

Expand All @@ -173,7 +219,7 @@ Same as [ListView](https://facebook.github.io/react-native/docs/listview.html) C
/>
```

# MeteorComplexListView Component
## MeteorComplexListView Component

Same as [ListView](https://facebook.github.io/react-native/docs/listview.html) Component but does not need dataSource and accepts one argument. You may need it if you make complex requests combining multiples collections.

Expand All @@ -194,19 +240,19 @@ Same as [ListView](https://facebook.github.io/react-native/docs/listview.html) C

## Meteor DDP connection

#### Meteor.connect(endpoint, options)
### Meteor.connect(endpoint, options)

Connect to a DDP server. You only have to do this once in your app.

#### Arguments
*Arguments*

- `url` **string** *required*
- `options` **object** Available options are :
- autoConnect **boolean** [true] whether to establish the connection to the server upon instantiation. When false, one can manually establish the connection with the Meteor.ddp.connect method.
- autoReconnect **boolean** [true] whether to try to reconnect to the server when the socket connection closes, unless the closing was initiated by a call to the disconnect method.
- reconnectInterval **number** [10000] the interval in ms between reconnection attempts.

#### Meteor.disconnect()
### Meteor.disconnect()

Disconnect from the DDP server.

Expand All @@ -219,16 +265,19 @@ Disconnect from the DDP server.

## Availables packages

### Convenience packages
Example `import { composeWithTracker } from 'react-native-meteor';``

* EJSON
* Tracker
* composeWithTracker: If you want to use [react-komposer](https://github.com/kadirahq/react-komposer), you can use react-native-meteor compatible composeWithTracker
* Accounts (see below)
* FSCollection (see below)


## Meteor.Accounts

### Meteor.Accounts

`import { Accounts } from 'react-native-meteor';``

* [Accounts.createUser](http://docs.meteor.com/#/full/accounts_createuser)
* [Accounts.changePassword](http://docs.meteor.com/#/full/accounts_forgotpassword)
Expand All @@ -237,15 +286,7 @@ Example `import { composeWithTracker } from 'react-native-meteor';``
* [Accounts.onLogin](http://docs.meteor.com/#/full/accounts_onlogin)
* [Accounts.onLoginFailure](http://docs.meteor.com/#/full/accounts_onloginfailure)

## Meteor.ddp

Once connected to the ddp server, you can access every method available in [ddp.js](https://github.com/mondora/ddp.js/).
* Meteor.ddp.on('connected')
* Meteor.ddp.on('added')
* Meteor.ddp.on('changed')
* ...

## FSCollection
### FSCollection

* Meteor.FSCollection(collectionName) : Helper for [Meteor-CollectionFS](https://github.com/CollectionFS/Meteor-CollectionFS). Full documentation [here](https://github.com/inProgress-team/react-native-meteor/blob/master/docs/FSCollection.md)
* This plugin also exposes a FSCollectionImagesPreloader component which helps you preload every image you want in CollectionFS (only available on ios)
Expand All @@ -259,8 +300,17 @@ import { FSCollectionImagesPreloader } from 'react-native-meteor';
/>
```

### Meteor.ddp

Once connected to the ddp server, you can access every method available in [ddp.js](https://github.com/mondora/ddp.js/).
* Meteor.ddp.on('connected')
* Meteor.ddp.on('added')
* Meteor.ddp.on('changed')
* ...

## How To ?

## react-native-router-flux
### react-native-router-flux

* You can use Switch with createContainer. Example :
```javascript
Expand Down

0 comments on commit bcc70eb

Please sign in to comment.