Popularity
6.7
Stable
Activity
0.0
Stable
1,335
39
75

Programming language: JavaScript
License: BSD 3-clause "New" or "Revised" License
Latest version: v3.2.0

react-transmit alternatives and similar libraries

Based on the "Communication with server" category.
Alternatively, view react-transmit alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-transmit or a related project?

Add another 'Communication with server' Library

README

View live demo

React Transmit

Relay-inspired library based on Promises instead of GraphQL.

Inspired by: Building the Facebook Newsfeed with Relay (React blog)

version license Package Quality npm installs downloads

Features

  • API similar to the official Relay API, adapted for Promises.
  • Higher-order Component (HoC) syntax is great for functional-style React.
  • Composable Promise-based queries using fragments.
  • Isomorphic architecture supports server-side rendering.
  • Also works with React Native!

Installation

    # For web or Node:
    npm install react-transmit

    # For React Native:
    npm install react-transmit-native

Usage

Newsfeed.js (read the comments)

import React    from "react";
import Transmit from "react-transmit";  // Import Transmit.
import Story    from "./Story";

const Newsfeed = React.createClass({
    render () {
        const {stories} = this.props;  // Fragments are guaranteed.

        return <div>{stories.map(story => <Story story={story} />)}</div>;
    }
});

// Higher-order component that will fetch data for the above React component.
export default Transmit.createContainer(Newsfeed, {
    initialVariables: {
        count: 10  // Default variable.
    },
    fragments: {
        // Fragment names become the Transmit prop names.
        stories ({count}) {
            // This "stories" query returns a Promise composed of 3 other Promises.
            return Promise.all([
                Story.getFragment("story", {storyId: 1}),
                Story.getFragment("story", {storyId: 2}),
                Story.getFragment("story", {storyId: 3})
            ]);
        },
        somethingDeferred () {
            // Return the promise wrapped in a function to mark this fragment as non-critical.
            return () => Promise.resolve(true);
        }
    }
});

Story.js (read the comments)

import React    from "react";
import Transmit from "react-transmit";  // Import Transmit.

const Story = React.createClass({
    render () {
        const {story} = this.props; // Fragments are guaranteed.

        return <p>{story.content}</p>;
    }
});

export default Transmit.createContainer(Story, {
    fragments: {
        // This "story" fragment returns a Fetch API promise.
        story ({storyId}) {
            return fetch("https://some.api/stories/" + storyId).then(res => res.json());
        }
    }
});

Documentation

See DOCS.md

Community

Let's start one together! After you ★Star this project, follow me @Rygu on Twitter.

License

BSD 3-Clause license. Copyright © 2015, Rick Wong. All rights reserved.


*Note that all licence references and agreements mentioned in the react-transmit README section above are relevant to that project's source code only.