Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blakeembrey/react-location
Light-weight and universal react routing
https://github.com/blakeembrey/react-location
hash-router history-router react react-context react-location react-router router
Last synced: 5 days ago
JSON representation
Light-weight and universal react routing
- Host: GitHub
- URL: https://github.com/blakeembrey/react-location
- Owner: blakeembrey
- License: other
- Created: 2018-11-25T01:20:16.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-06-22T22:09:36.000Z (over 2 years ago)
- Last Synced: 2024-11-02T08:41:44.329Z (12 days ago)
- Topics: hash-router, history-router, react, react-context, react-location, react-router, router
- Language: TypeScript
- Size: 539 KB
- Stars: 11
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Location
[![NPM version][npm-image]][npm-url]
[![NPM downloads][downloads-image]][downloads-url]
[![Build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
> Light-weight and universal React.js routing.
## Installation
```
npm install @blakeembrey/react-location --save
```
## Usage
**React Location** exports a React.js `Context` to control routing. The default router is `SimpleLocation`, useful for testing or server-side rendering.
```js
import { Link, useURL } from "@blakeembrey/react-location";
const App = () => {
const url = useURL();
return (
Home
About
{url.pathname === "/" &&
Home}
{url.pathname === "/about" && About}
);
};
```
**Location Properties:**
- `url` Get the locations current [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL)
- `push(location: string)` Push the user to a new URL (e.g. `` or dynamic redirects)
- `format(location: string)` Format the URL for ``
- `onChange(fn: () => void)` Notify `fn` on URL change (returns an `unsubscribe` function)
**Tip:** For a simpler routing experience, combine with [`@blakeembrey/react-route`](https://github.com/blakeembrey/react-route).
```js
import { Route } from "@blakeembrey/react-route";
export default () => (
{() => Home}
{([id]) => }
);
```
### [Hash Location](examples/hash/app.js)
```js
import { Context, HashLocation } from "@blakeembrey/react-location";
;
```
### [History Location](examples/history/app.js)
```js
import { Context, HistoryLocation } from "@blakeembrey/react-location";
;
```
### [Simple Location](examples/simple/app.js)
Useful for testing React.js applications or server-side rendering.
```js
import { Context, SimpleLocation } from '@blakeembrey/react-location'
// E.g. `req.url` from a node.js HTTP server.
const location = new SimpleLocation(new URL(`http://example.com${req.url}`))
```
## TypeScript
This project uses [TypeScript](https://github.com/Microsoft/TypeScript) and publishes definitions on NPM.
## License
Apache 2.0
[npm-image]: https://img.shields.io/npm/v/@blakeembrey/react-location.svg?style=flat
[npm-url]: https://npmjs.org/package/@blakeembrey/react-location
[downloads-image]: https://img.shields.io/npm/dm/@blakeembrey/react-location.svg?style=flat
[downloads-url]: https://npmjs.org/package/@blakeembrey/react-location
[travis-image]: https://img.shields.io/travis/blakeembrey/react-location.svg?style=flat
[travis-url]: https://travis-ci.org/blakeembrey/react-location
[coveralls-image]: https://img.shields.io/coveralls/blakeembrey/react-location.svg?style=flat
[coveralls-url]: https://coveralls.io/r/blakeembrey/react-location?branch=master