https://github.com/dafunk-759/react-use-url
a tiny simple lib for react route.
https://github.com/dafunk-759/react-use-url
react react-hook react-router
Last synced: 3 months ago
JSON representation
a tiny simple lib for react route.
- Host: GitHub
- URL: https://github.com/dafunk-759/react-use-url
- Owner: Dafunk-759
- Created: 2022-02-16T09:00:15.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-02-23T06:56:55.000Z (over 4 years ago)
- Last Synced: 2024-11-16T01:40:06.015Z (over 1 year ago)
- Topics: react, react-hook, react-router
- Language: JavaScript
- Homepage:
- Size: 1.32 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-use-url
> a tiny simple lib for react route
## Install
```bash
npm install --save react-use-url
```
## Usage
```jsx
import React from "react"
import {
matchPath,
otherwise,
useUrl
} from "react-use-url"
export default function App() {
const { path } = useUrl()
const body = matchPath(path, {
"/": () => ,
"/teams": () => ,
"/teams/new": () => ,
"/teams/:teamId": teamId => ,
[otherwise]: () =>
})
return (
{body}
)
}
function Main({children}) {
return (
Main
{children}
)
}
function Home() {
return
Home
}
function NotFound(width, height) {
return
NotFound
}
function Teams({children}) {
return (
Teams
{children}
)
}
function Team({teamId}) {
return (
{"teamId is: " + teamId}
)
}
function NewTeamForm() {
return
new team form
}
function LeagueStandings() {
return
LeagueStandings
}
function outline(color, width, height) {
return {
border: `2px solid ${color}`,
padding: "20px",
width: `${width}px`,
height: `${height}px`
}
}
```
## Api
### Url
```ts
export interface Url {
path: string[],
hash: string,
search: string,
state?: string
}
```
### useUrl
`useUrl` is a React Hook to get `Url` and subscribe
the component's render to `watchUrl`.
when the `Url` change(`push` or `replace` get called).
the component will rerender to get the fresh data.
``` ts
export function useUrl(): Parsed
```
### watchUrl
start watch url. When `push` or `replace` called.
run the `cb`.
```ts
export function watchUrl(cb:WatchCB): WatchID
type WatchCB = (url:Url) => void
export type WatchID = () => void
```
### unwatchUrl
stop watch url. use the given `watchID`.
``` ts
export function unwatchUrl(watchID:WatchID): void
type WatchCB = (url:Url) => void
export type WatchID = () => void
```
### getInitUrl
query the global `location` and parse it to
`Url`.
the object's state property is not parsed.
warning: you may get old data.
```ts
export function getInitUrl(): Url
```
### push
use `history.pushState` to push the `path`
and dispatch the `popstate` event.
this will trigger the subs rerun.
the state will be serialized and store in the `window.history.state`.
`baseUrl` is default to "".
```ts
export function push(path:string, state?:A, baseUrl?:string): void
```
### replace
use `history.replaceState` to replace the `path`
and dispatch the `popstate` event.
this will trigger the subs rerun.
the state will be serialized and store in the `window.history.state`.
`baseUrl` is default to "".
```ts
export function replace(path:string, state?:A, baseUrl?:string): void
```
### matchPath
`matchPath` is a simple helper to match your
url pattern.
```ts
type F = (...args:string[]) => unknown
type MatchReturn<
A extends Record
> = {
[k in keyof A]: ReturnType
}[keyof A]
export function matchPath<
A extends Record
>(path: string[], matchOption: A): MatchReturn
```
### otherwise
`otherwise` is used to catch all case.
example:
```jsx
matchPath(path, {
[otherwise]: () =>
})
```
```ts
export const otherwise: unique symbol
```
## License
MIT © [Dafunk-759](https://github.com/Dafunk-759)