https://github.com/devnax/react-pagex
https://github.com/devnax/react-pagex
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/devnax/react-pagex
- Owner: devnax
- License: mit
- Created: 2022-08-25T17:43:14.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-09-19T20:37:32.000Z (over 3 years ago)
- Last Synced: 2025-02-23T11:26:06.225Z (over 1 year ago)
- Language: TypeScript
- Size: 1.38 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## React PageX
The `react-pagex` is a very tiny library for manage react app routes. It's very simple to use.
### Availabel Hooks and Components
```js
import {
Link,
useRoute,
useGroup,
useQuery,
Navigate,
Route,
Routes,
Parser
} from 'react-pagex'
```
### Useg
```jsx
import {Link, Routes, Route} from 'react-pagex'
const Home = ({params, query}) => {
return
Home
}
const About = ({params, query}) => {
return About
}
const Contact = ({params, query}) => {
return
Contact
}
export default () => {
return (
{
}}
>
)
}
```
### Link Component
```jsx
const LinkComp = ({children, ...props}) =>
// With Children
Children
```
### Routes Component
`Routes` used the useGroup hook
```jsx
{
}}
onFound={(route) => {
}}
>
children
```
### Route Component
`Route` used the useRoute hook
```jsx
```
### Navigate
Navigate Page without `Link` Component
```js
import {Navigate} from 'react-pagex'
Navigate.go('/path')
Navigate.back()
Navigate.forward()
Navigate.reload()
```
### useGroup
```js
const App = () => {
useGroup({
basepath: '',
onError: () => {},
onFound: () => {},
})
return <>app>
}
```
### useRoute
```js
const App = () => {
const params = useRoute('/path')
if(params){
return
}
return <>>
}
```
### useQuery
Just get the current route query with an object
### Parser
The `Parser` is a module for match and parse the route
```js
const params = Parser.isMatch('/path/:id', 'compare path')
```