Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blakeembrey/react-route
React Location with Path-to-RegExp
https://github.com/blakeembrey/react-route
path-to-regexp react react-location react-router router
Last synced: about 1 month ago
JSON representation
React Location with Path-to-RegExp
- Host: GitHub
- URL: https://github.com/blakeembrey/react-route
- Owner: blakeembrey
- License: other
- Created: 2018-11-25T07:20:05.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-12T06:13:35.000Z (about 1 year ago)
- Last Synced: 2024-11-02T09:42:34.503Z (about 2 months ago)
- Topics: path-to-regexp, react, react-location, react-router, router
- Language: TypeScript
- Homepage:
- Size: 1.94 MB
- Stars: 9
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# React Route
[![NPM version][npm-image]][npm-url]
[![NPM downloads][downloads-image]][downloads-url]
[![Build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![Bundle size][bundlephobia-image]][bundlephobia-url]
> [Path-to-RegExp](https://github.com/pillarjs/path-to-regexp) with [React Location](https://github.com/blakeembrey/react-location).
## Installation
```
npm install @blakeembrey/react-route --save
```
## Usage
Use with [React Location](https://github.com/blakeembrey/react-location).
```js
import {
Route,
Switch,
useRoutePath,
useMatch,
usePathMatch,
usePathCompile,
} from "@blakeembrey/react-route";
```
### `Route`
Conditionally renders `component` when the path matches the active URL.
```js
const App = () => {
return (
{JSON.stringify(params)}}
/>
);
}; // `/123` => `["123"]`
```
Supports `path-to-regexp` properties:
- **sensitive** When `true`, the regexp will be case sensitive. (default: `false`)
- **strict** When `true`, optional trailing delimiters will not match. (default: `false`)
- **end** When `true`, the regexp will match to the end of the string. (default: `true`)
- **start** When `true`, the regexp will match to the beginning of the string. (default: `true`)
### `Switch`
Component for matching and rendering the first `` of children.
```js
const App = () => {
return (
Blake} />
{id}} />
404 Not Found} />
);
}; // `/me` => `Blake`
```
### `useRoutePath`
Returns the current pathname based on the router (e.g. route prefixes are removed).
```js
useRoutePath(); //=> "/foo"
```
### `useMatch`
Create a `path-to-regexp` match function and run it on the current path.
```js
const App = () => {
const result = useMatch("/test");
return
{JSON.stringify(result)};
}; //=> `{"params":[],"index":0,"path":"/test"}`
```
### `usePathMatch`
Create a `path-to-regexp` match function.
```js
const App = () => {
const match = usePathMatch("/test");
return
{JSON.stringify(match("/"))};
}; //=> `false`
```
### `usePathCompile`
Creates a `path-to-regexp` path function.
```js
const App = () => {
const path = usePathCompile("/:id")({ id: 123 });
return User {id};
};
```
## 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-route.svg?style=flat
[npm-url]: https://npmjs.org/package/@blakeembrey/react-route
[downloads-image]: https://img.shields.io/npm/dm/@blakeembrey/react-route.svg?style=flat
[downloads-url]: https://npmjs.org/package/@blakeembrey/react-route
[travis-image]: https://img.shields.io/travis/blakeembrey/react-route.svg?style=flat
[travis-url]: https://travis-ci.org/blakeembrey/react-route
[coveralls-image]: https://img.shields.io/coveralls/blakeembrey/react-route.svg?style=flat
[coveralls-url]: https://coveralls.io/r/blakeembrey/react-route?branch=master
[bundlephobia-image]: https://img.shields.io/bundlephobia/minzip/@blakeembrey/react-route.svg
[bundlephobia-url]: https://bundlephobia.com/result?p=@blakeembrey/react-route