Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/elemental-design/react-router-primitives
- Owner: elemental-design
- License: mit
- Created: 2020-03-05T19:40:14.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T09:11:12.000Z (about 2 years ago)
- Last Synced: 2025-01-17T08:13:14.312Z (25 days ago)
- Topics: react, react-primitives, react-router, react-router-primitives
- Language: JavaScript
- Size: 35.2 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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);
}
};
```