react-realm-js v1.0.1

react-realm-js

Module to bind realm events change to React components using similar React-Redux semantic.

NOTE: This is a early version, was not heavly tests yet.

Install

npm install --save react-realm-js

Usage

  import { createRealmStore, RealmProvider } from 'react-realm-js'

  // Create and prepare realm and create a store
  constructor(props, context){
    super(props, context)
    const realm = new Realm({ schema: [PersonSchema] });
    this.realmStore = createRealmStore(realm)
  }
  
  //RealmProvider makes the realmStore available to the connectRealm()
  render(){
    return (
        <RealmProvider realmStore={this.realmStore}>
          <Container test="test"/>
        </RealmProvider>
    )
  }
  
  //Container/index.js
  import { connectRealm } from 'react-realm-js'
  import Container from './Container'
  
  //Map queries to component props
  //Ream: Realm reference to execute the queries
  //ownProps: Props passed to the component
  const mapQueriesToProps = (realm, ownProps) =>({  
    people: realm.objects('Person').slice().reverse()
  })
  
  //Map fuction to write on realm DB. Each function is wrapped inside of realm.write(()=> ...)
  //Ream: Realm reference to execute the queries
  //queries: Result of the queries execute in the mapQueriesToProps
  const mapWritterToProps = (realm, queries) => ({  // Each function 
    addPerson: () => {
        const biggest = realm.objects('Person').sorted('id', true).slice(0, 1).map(o => o.id)
        const id = biggest.length > 0 ? biggest[0] + 1 : 1
        realm.create('Person', { id: id, name: 'Person'.concat(new String(id)) })
    }
  })
  
  //Connects a React component to a realmStore. 
  export default connectRealm(mapQueriesToProps, mapWritterToProps)(Container)

Redux compatible

  import { connectRealm } from 'react-realm-js'
  import { connect } from 'react-redux'
  import { increment } from '../redux/counter/actions'
  import Container from './Container'

   (...)
    
  //Connects a React component to a realmStore. 
  const reamWrapper = connectRealm(mapQueriesToProps, mapWritterToProps)(Container)

  //Connect a React component to redux store
  const reduxWrapper = connect(state => ({
    count: state.counter.count
  }), {
    increment: () => increment()
  })

  //Merge react-realm-js and react-redux
  export default realmWrapper(reduxWrapper(Container))

Issues report and push request

• Always Wellcome

TODO

• Unit tests
• Update API to support multiples realms
• Update to Connection Notification when stable

LICENSE

Apache 2.0