Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/elemental-design/react-router-primitives

React router primitives
https://github.com/elemental-design/react-router-primitives

react react-primitives react-router react-router-primitives

Last synced: about 17 hours ago
JSON representation

React router primitives

Awesome Lists containing this project

README

        

# 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

```sh
npm i -S react-router-primitives
```

## API

```js
module.exports = {
Router,
Route,
Link,
Switch,
withRouter,
}
```

### Exported Components and Methods

### ``

A universal router component that uses `` on web, `` on React Sketch.app and `` on React Native. Thanks to [ReactTraining/react-router](https://github.com/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

```js
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 = () => (


} />
} />
} />




);

// Sketch entry-point
export default () => {
const { selectedPage } = sketch.getSelectedDocument();
try {
render((



), selectedPage);
} catch (err) {
render(, selectedPage);
}
};
```