0.1.2 • Published 4 years ago
react-router-primitives v0.1.2
react-router-primitives
Create cross-platform app routing for React web, React Native and react-sketchapp.
(work in progress and unstable API). Please wait for 0.1.0 release as a minimum for a more stable API.
Getting Started
npm i -S react-router-primitives
API
module.exports = {
Router,
Route,
Link,
Switch,
withRouter,
}
Exported Components and Methods
<Router>
A universal router component that uses <BrowserRouter>
on web, <SketchRouter>
on React Sketch.app and <NativeRouter>
on React Native. Thanks to ReactTraining/react-router.
Props
Prop | Type | Default | Note |
---|---|---|---|
location | string | Location | required | String or Location e.g. { key: 'ac3df4', pathname: '/somewhere', search: '?some=search-string', hash: '#howdy', state: [userDefined]: true } } |
locations | [string[] ] | [Location[] ] | required | List of strings or locations |
viewport | viewport | required | Object: { name: string, width: number, height: number} |
children | Node | required |
Example
import sketch from 'sketch';
import { Router, Route, Switch } from 'react-router-primitives';
import { RedBox, render } from 'react-sketchapp';
const pageWidth = ...;
// Multi-platform app component (can be imported from component library or other file)
const App = () => (
<Router
locations={['/profile/john']}
viewport={viewports}
>
<Switch>
<Route exact path="/" render={() => <Home />} />
<Route path="/about" render={() => <About />} />
<Route path="/profile/:username" render={({ match: { params } }) => <Profile {...params} />} />
<Route component={NotFound} />
</Switch>
</SketchRouter>
</Page>
);
// Sketch entry-point
export default () => {
const { selectedPage } = sketch.getSelectedDocument();
try {
render((
<Page name="App" style={{ flexDirection: 'row', flexWrap: 'wrap', maxWidth: pageWidth }}>
<App />
</Page>
), selectedPage);
} catch (err) {
render(<RedBox error={err} />, selectedPage);
}
};