Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@elao/react-native-realm-connect

Package Overview
Dependencies
Maintainers
3
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@elao/react-native-realm-connect

Connect React Native components to Realm queries

  • 1.0.4
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
3
Created
Source

React Native Realm Connect

Connect React Native components to Realm queries:

Installation

npm install @elao/react-native-realm-connect

Usage

Get the connector method:

import connectToQuery from '@elao/react-native-realm-connect';

The connectToQuery method is similar to the connect method from redux (but not exactly the same) and should be used as follow:

connectToQuery({
    [prop name]: [function that returns a Realm Results object],
    [...other props]
})(MyWrappedComponent);

List

Example:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FlatList } from 'react-native';
import connectToQuery from '@elao/react-native-realm-connect';
import Dog from './model/Dog';

class DogList extends Component {
  static propTypes = {
    dogs: PropTypes.arrayOf(PropTypes.instanceOf(Dog)).isRequired,
  };

  render() {
    const { dogs } = this.props;

    return <FlatList data={dogs} /*...*/ />;
  }
}

export default connectToQuery({
  dogs: () => realm.objects('Dog').filtered('goodBoy == $0', true),
})(DogList);

Unique result

Get the unique filter:

import connectToQuery, { unique } from '@elao/react-native-realm-connect';

Mark the query function as unique so that it only returns the first result of the Realm Results object:

connectToQuery({
    [prop name]: unique([function that returns a Realm Results object]),
    [...other props]
})(MyWrappedComponent)

Example:

// ...
import connectToQuery, { unique } from '@elao/react-native-realm-connect';

class MyCat extends Component {
  static propTypes = {
    userId: PropTypes.string.isRequired,
    cat: PropTypes.instanceOf(Cat).isRequired,
  };

  render() {
    const { cat } = this.props;

    return <Text>{cat.name}</Text>;
  }
}

export default connectToQuery({
  cat: unique(props => realm.objects('Cat').filtered('user.id == $0', props.userId)),
})(MyCat);

Extract result

Get the extract filter:

import connectToQuery, { extract } from '@elao/react-native-realm-connect';

You can use extract for any other need, just provide a callback that will be applied on the results object and its return value will be passed as props.

connectToQuery({
    [prop name]: extract([function that returns a Realm Results object with (props)], [callback function with (results, props) parameters],
    [...other props]
})(MyWrappedComponent)

Example:

// ...
import connectToQuery, { unique } from '@elao/react-native-realm-connect';

class MyCat extends Component {
  static propTypes = {
    userId: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
  };

  render() {
    const { age } = this.props;

    return <Text>I'm {age} years old.</Text>;
  }
}

export default connectToQuery({
  age: extract(
    props => realm.objects('User').filtered('id == $0', props.userId),
    (results, props) => results ? results[0].age : null,
  ),
})(MyCat);

Usage with Redux

You can use a prop that comes from Redux state and use it in your Realm Query by chainning the two connectors:

//...
import { connect } from 'react-redux';
import connectToQuery from '@elao/react-native-realm-connect';

class FishBowl extends Component {
  static propTypes = {
    fishes: PropTypes.arrayOf(PropTypes.instanceOf(Fish)).isRequired,
  };

  render() {
    const { fishes } = this.props;

    return <FlatList data={fishes} /*...*/ />;
  }
}

const mapStateToProps = state => ({
    color: state.filter.fishColor,
});

const RealmConnectedFishBowl = connectToQuery({
  dogs: props => realm.objects('Fish').filtered('color == $0', props.color),
})(FishBowl)

export default connect(mapStateToProps)(RealmConnectedFishBowl);

Keywords

FAQs

Package last updated on 14 Nov 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc