Skip to content
React adapter for foil. 800 bytes.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.babelrc
.gitignore
Link.js
README.md
Router.js
history.js
index.js
package-lock.json
package.json
util.js
withHistory.js

README.md

@foil/react

React adapter for foil. 800 bytes.

Features & Goals

  1. Flexible
  2. Async
  3. Tiny

Install

npm i foil @foil/react --save

Usage

foil is somewhat unique in that when and what it renders is up to the user. The same applies to @foil/react.

Instead of immediately rendering navigation events, @foil/react calls a user defined resolve function with the matched route and a rerender callback that accepts a React component. Users can then fetch data, load components, or perform transition animations before calling rerender when ready.

Mounting the Router

On the client, the Router component requires the following items:

  • router - a foil router instance
  • context - an initial context object, obtained by resolving the starting location using the foil router instance
  • resolve - user defined function, called when a route is matched
import React from 'react'
import { render } from 'react-dom'
import { router, route } from 'foil'
import { Router } from '@foil/react'

const app = router([
  route({
    path: '/',
    payload: {
      Component: () => <h1>Home</h1>
    }
  }),
  route({
    path: '*',
    payload: {
      Component: () => <h1>404</h1>
    }
  })
])

app.resolve(window.location.pathname, ({ payload, context }) => {
  const { Component } = payload

  render((
    <Router
      router={app}
      context={context}
      resolve={({ payload, context }, rerender) => {
        const { Component } = payload
        rerender(Component)
      }}>
      <Component />
    </Router>
  ), document.body)
})

Navigating

@foil/react includes a Link component to allow for easy naviation throughout your app.

import { Link } from '@foil/react'

export default props => (
  <nav>
    <ul>
      <li><Link href='/'>Home</Link></li>
    </ul>
  </nav>
)

Accessing Router Internals

For history state, use the withHistory higher order component. It provides its child with the full state object from foil on the history prop:

import { withHistory } from '@foil/react'

export default withHistory(props => (
  <h1>Router location: {props.history.state.location}</h1>
))

You can also use the history manager directly.

import { history } from '@foil/react'

export default props => (
  <button onClick={e => {
    history.push('/')
    // or history.replace('/'), skips render
  }>Go to Home</button>
)

Server Side Rendering

On the server, usage is essentially the same as on the client. However, since we don't need to resolve route changes, the resolver prop on Router is not required.

import express from 'express'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { router } from 'foil'
import { Router } from '@foil/react'
import routes from './routes.js' // array of foil routes

server.get('*', (req, res) => {
  const app = router(routes, {})

  app.resolve(req.originalUrl, ({ payload, context, redirect }) =>  {
    if (redirect) {
      res.redirect(redirect.to)
    }

    const { Component } = payload

    res.send(`<!doctype html>
      <html>
        <head></head>
        <body>${renderToString(
          <Router router={router} context={context}>
            <Component />
          </Router>
        )}</body>
      </html>
    `)
  })
})

Recipes

For sketches of data-loading, redirects, etc, refer to the foil README.

License

MIT License © Eric Bailey

You can’t perform that action at this time.