React Sketch.app Router

Render your React app as a Sketch prototype. This is currently in development, so the API is not final and production use is discouraged until a stable release.

Getting Started

1. Make sure you have Node.js and npm setup.

2. Install this package with npm install --save react-sketchapp-router and refer to examples/responsive-devices for an example.

3. Install react-sketchapp and make sure to use the latest @3 version.

Example

Inside react-sketchapp's `render argument, use this:

import { SketchRouter, Switch, Route, Link } from 'react-sketchapp-router';
import { render, View, Text, Document, Page } from 'react-sketchapp';

const Home = ({ location }) => (
  <View>
    <Link to="/about">
      <Text>Go to About</Text>
    </Link>
  </View>
);

const About = ({ location }) => (
  <View>
    <Link to="/">
      <Text>Go to Home</Text>
    </Link>
  </View>
);

render(
  <Document>
    <Page name="App">
      <SketchRouter locations={['/profile/jack']} viewport={{ name: 'Mobile', width: 360, height: 640 }}>
        <Switch>
          <Route path="/" exact render={({ location }) => <Home /> } />
          <Route path="/about" render={({ location }) => <About />} />
          <Route path="/profile/:user" render={({ location }) => <About />} />
          <Route render={() => <NotFound />}>
        </Switch>
      </SketchRouter>
    </Page>
  </Document>
)

Where <SketchRouter locations={['/profile/jack']} is used to specify data for path params, e.g. /profile/:user.

Inspiration and Code References

• react-router
  • MIT License
  • Copyright (c) React Training 2016-2018
• react-sketchapp
  • MIT License
  • Copyright (c) 2018 Airbnb

License

LICENSE