Socket
Book a DemoInstallSign in
Socket

async-props-promise

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

async-props-promise

Promise based component data fetching for React Router

0.4.5
latest
Source
npmnpm
Version published
Weekly downloads
0
-100%
Maintainers
1
Weekly downloads
 
Created
Source

AsyncProps for React Router

This is a shameless ripoff of Async Props This library is promise based which allows for async/await goodness. View transitions happen immediately, async props are then populated when the promise resolves.

Installation

Using npm:

$ npm install async-props-promise

Then with a module bundler like webpack, use as you would anything else:

// using an ES6 transpiler, like babel
import AsyncProps from 'async-props-promise'

The UMD build is also available on npmcdn:

<script src="https://npmcdn.com/async-props-promise/umd/AsyncProps.min.js"></script>

You can find the library on window.AsyncProps.

Notes

This is pre-release, it's pretty close though. If you are using it then you are a contributor. Please add tests with all pull requests.

Usage

import { Router, Route } from 'react-router'
import AsyncProps from 'async-props-promise'
import React from 'react'
import { render } from 'react-dom'
import tacoFetcher from './taco-fetcher';
class App extends React.Component {

  // 1. define a `loadProps` static method
  static async loadProps(params) {
      const tacos = await tacoFetcher.getTacos();    
      return {tacos};
  }

  render() {
      if(!this.props.tacos){
          return <div>Loading...</div>
      }
    // 2. access data as props :D
    const tacos = this.props.tacos;
    return (
      <div>
        <ul>
          {tacos.map(taco => (
            <li>{taco}</li>
          ))}
        </ul>
      </div>
    )
  }
}

// 3. Render `Router` with AsyncProps middleware
render((
  <Router render={(props) => <AsyncProps {...props}/>}>
    <Route path="/" component={App}/>
  </Router>
), el)

Server

import { renderToString } from 'react-dom/server'
import { match, RoutingContext } from 'react-router'
import AsyncProps, { loadPropsOnServer } from 'async-props-promise'

app.get('*', (req, res) => {
  match({ routes, location: req.url }, (err, redirect, renderProps) => {

    // 1. load the props
    loadPropsOnServer(renderProps, (err, asyncProps, scriptTag) => {

      // 2. use `AsyncProps` instead of `RoutingContext` and pass it
      //    `renderProps` and `asyncProps`
      const appHTML = renderToString(
        <AsyncProps {...renderProps} {...asyncProps} />
      )

      // 3. render the script tag into the server markup
      const html = createPage(appHTML, scriptTag)
      res.send(html)
    })
  })
})

function createPage(html, scriptTag) {
  return `
    <!doctype html>
    <html>
      <!-- etc. --->
      <body>
        <div id="app">${html}</div>

        <!-- its a string -->
        ${scriptTag}
      </body>
    </html>
  `
}

API

Please refer to the example, as it exercises the entire API. Docs will come eventually :)

Keywords

react

FAQs

Package last updated on 11 Feb 2017

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.